CODEWITHSUNDEEP
angularjsscopeng-style
A_V
A_V

Reputation: 372

ng-style assign dynamic scope variable from $index

I'm trying to assign a scope variable's value to an ng-style directive but the name is not parsing.

What am I doing wrong? When you press the TEST button it should turn the text to RED but the scope variable is not parsing as it's name is dynamic. I've tried multiple different syntax which all didn't work.

Here is the html:

<div ng-app="myApp" ng-controller="MyCtrl">  
<button ng-click="Test()">test</button>
<div ng-repeat="item in items">
   <div ng-style="{{'DynamicVariable-'+$index}}">
    {{someone.name}}
   </div>
  </div>
</div>

controller code

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.someone = {
    name: 'John'
  };
$scope.items=[1,2,3,4,5,6,7,8,9];
  $scope.mainId = 1;
  $scope.Test=function(){
      for(var i=0;i<$scope.items.length;i++){
    $scope["DynamicVariable-"+i]={color:'red'};    
  }
  console.log($scope);
  };
}]);

js fiddle that doesn't work: http://jsfiddle.net/avboivin/0qov365b/4/

Upvotes: 0

Views: 510

Answers (1)

Gal Grazia
Gal Grazia

Reputation: 477

It has a problem with '-', try to remove it

html:

<div ng-app="myApp" ng-controller="MyCtrl">
    <button ng-click="Test()">test</button>
    <div ng-repeat="item in items">
        <div ng-style="{{'DynamicVariable'+$index}}">
            {{ someone.name }}
        </div>
    </div>
</div>

controller:

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.someone = {
        name: 'John'
    };
    $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    $scope.mainId = 1;
    $scope.Test = function () {
        for (var i = 0; i < $scope.items.length; i++) {
            $scope["DynamicVariable" + i] = { color: 'red' };
        }
        console.log($scope);
    };
}]);

fork

Upvotes: 2

Related Questions