How to create dynamically $scope variable and function in angular JS

Question

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/

Solution 1

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 ];
}

Solution 2

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