Geek Answers Handbook

AngularJS: a variable in ng-repeat without $ scope is in its local scope?

here is the code:

<ul>
  <li ng-repeat="i in items" ng-class="{'red': click}">
    <span ng-click="click = !click">{{i}}</span>
  </li>
</ul>

<ul>
  <li ng-repeat="j in items" ng-class="{'red': f_click}">
    <span ng-click="fun_click($index)">{{j}}</span>
  </li>
</ul>

f_clickchange fun_clickfunction.

$scope.fun_click = (idx) ->
    $scope.f_click = !$scope.f_click

full codes: http://plnkr.co/edit/Zmoqbv?p=preview

Interestingly, the variable clickin the first list is a local variable for each ng-repeat element?
how it works?

How can I do f_clickin the second list how click?
It seems to $scope.f_clickbe the only variable in the ng controller.

Updated:

I think I just did something wrong. I do not have to write things in View.

read-only in view mode; only for recording in the controller.
http://www.jacopretorius.net/2013/07/angularjs-best-practices.html

+4
3

f_click

, . click .

f_click , ( )

, :

$scope.items2 = [
{'name': 'Google','value':false},
{'name': 'Apple','value':false},
{'name': 'Yahoo','value':false},
{'name': 'IBM','value':false},
];

 $scope.fun_click = (item) ->
   item.value = !item.value;

HTML

 <ul>
  <li ng-repeat="j in items2" ng-class="{'red': j.value}">
    <span ng-click="fun_click(j)">{{j.name}}</span>
  </li>
</ul>

. Plunker

+4

ng-repeat . click ng-repeat, . {{click}} <body ng-controller="MainCtrl">, ng-repeat , click ().

, f_click MainCtrl, ng-repeat s. , (fun_click), . ng-repeat , , .

f_click click, ng-repeat. f_click fun_click() ng-repeat. .

+3

, ngRepeat , - , ngRepeat . , click items click ngClick, . f_click $scope , ngRepeat, .

f_click, ngRepeat, :

// Script
$scope.fun_click = (toggle) ->
    return !toggle

// HTML
<span ng-click="f_click=fun_click(f_click)">{{j}}</span>

If you want to keep the state in $scope, you can use a dictionary to track the status of each $index:

// Script
$scope.form_status = {}
$scope.fun_click = (index) ->
    $scope.form_status[index] = !$scope.form_status[index]

// HTML
<li ng-repeat="j in items" ng-class="{'red': form_status[$index]}">
    <span ng-click="fun_click($index)">{{j}}</span>
</li>

The plunker is updated here: http://plnkr.co/edit/w6RLed?p=preview

+3
source

More articles:


All Articles