current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

I trying to creating dynamically $scope variable and function and call to ng-click directive.

My scenario is call dynamically function in ng-repeat & ng-click.

Json
{
  "listnames": [
{ name: rock, age: 24, year: 1999},
{ name: rock1, age: 24, year: 1999},
{ name: rock2, age: 24, year: 1999},
{ name: rock3, age: 24, year: 1999}
]
}

in view.html file 

<td ng-repeat="list in listnames.name track by $index" class="smallbox_{{$index}}" ng-class="{'showblock': isbox_{{$index}}, 'hideBlock': !isbox_{{$index}}}" ng-click="isshowhide{{$index}}_new()" >

i.e mean that

<td ng-repeat="list in listnames.name track by $index" class="smallbox_0" ng-class="{'showblock': isbox_0, 'hideBlock': !isbox_0}" ng-click="isshowhide0_new()" >

<td ng-repeat="list in listnames.name track by $index" class="smallbox_1" ng-class="{'showblock': isbox_1, 'hideBlock': !isbox_1}" ng-click="isshowhide1_new()" >

so.. on...

In Controller.js file 

$scope.isshowhide0_new = function(){
        $scope.isbox_0 = !$scope.isbox_0;
}
$scope.isshowhide1_new = function(){
        $scope.isbox_1 = !$scope.isbox_1;
}

But, i need solution creating dynamically call function and $scope variable.

similar like that...

for(var i=0; i< 288; i++){

$scope.isshowhide[i]_new = function(){
        $scope.isbox_[i] = !$scope.isbox_[i];
}

OR

$scope.isshowhide{{i}}_new = function(){
        $scope.isbox_{{i}} = !$scope.isbox_{{i}};
}

Is it possible this type solution in Angular JS.

So, i can call dynamic function & $scope variable using by $index as

ng-click="isshowhide0_new();"
ng-click="isshowhide1_new();"
ng-click="isshowhide2_new();"
ng-click="isshowhide3_new();" ...

OR

ng-class="{'showblock': isbox_0, 'hideBlock': !isbox_0}"
ng-class="{'showblock': isbox_1, 'hideBlock': !isbox_1}"
ng-class="{'showblock': isbox_2, 'hideBlock': !isbox_2}"

I hope you understand what exactly i need..

So, please someone, Can you give to me the solution and implement this type functionality.

I have some code implement for testing purpose. http://jsfiddle.net/twc7Lbe3/

Please modify this code and let me know. Also provide solution if it's possible it.

http://jsfiddle.net/twc7Lbe3/

share|improve this question

2 Answers 2

up vote 0 down vote accepted

You do know that in javascript:

obj.property === obj["property"]

So if you really want to, you can:

<td ng-repeat="list in listnames.name track by $index" class="smallbox_{{$index}}" ng-class="{'showblock': isbox_{{$index}}, 'hideBlock': !isbox_{{$index}}}" ng-click="isshowhide_new($index)" >

And then:

$scope.isshowhide_new = function(i){
        $scope['isbox_' + i ] = !$scope['isbox_' + i ];
}
share|improve this answer
up vote 0 down vote

One solution is to use an array to control the show/hide block classes:

<td ng-repeat="..." ng-click="isbox[$index]=!isbox[$index]" ng-class="{'showblock': isbox[$index], 'hideBlock': !isbox[$index]}"></td>

And in the controller populate your isbox array with booleans:

$scope.isbox = [];
for(var i=0; i< 288; i++){ // In case you want to initialize all values as false
    $scope.isbox[i] = false;
}

Not sure if this is what you're looking for but here you have an updated fiddle

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.