将 ng-repeat 循环内的 ng-click 隔离到被单击的元素

Question

对于措辞不当的问题，我深表歉意，我是 Angularjs 的新手。使用 ng-repeat 和 ng-click 从控制器请求额外信息。执行 ng-click 时，所有用户都会更新，因为他们属于 ng-repeat。

是否可以隔离 ng-click 或设置模板以便只有活动用户才能收到请求的数据？

我尝试了一些带有结果标签的条件逻辑和控制器中的 ng-click 但没有成功。谢谢！

jsfiddle here with example code: http://jsfiddle.net/2cd3tr55/2/

::HTML::

<div ng-controller="DomReadyCtrl">
    <p>Hello {{test}}</p>
    <div class="loop" ng-repeat='user in users track by $index'>
        <div id="{{user.name}}">
            <strong>user: </strong><em>{{user.name}} {{user.name == 'bert' ? '--toggle on bert' : ''}}</em>
            <div>
                <a ng-class="user{{user.id}}" href="javascript:void(0)" ng-click="GetUsername(user.id)">Get More Info:</a>
                <br>
                <span class="stats"> Months Worked: {{stats[0].months_worked}}, PTO Earned: {{stats[0].pto_earned}}</span>
            </div>
        </div>
        <br>
    </div>
</div>

::JS::

var app = angular.module('app', []);
app.controller('DomReadyCtrl', function($timeout, $scope){
    $scope.users = [];
    $scope.test = "World";
    $scope.users = [ 
        {'name':'al','id':'0'},
        {'name':'bert','id':'1'},
        {'name':'charles','id':'2'},
        {'name':'dave','id':'3'},
        {'name':'eddie','id':'4'},
        {'name':'frank','id':'5'}
        ];
    //console.log($scope.users);

    document.body.setAttribute('class', 'red');
    alert('Angular view not ready');

    $scope.GetUsername = function(userID) { // ng-click gets new array data
        $scope.stats = [];
        if ( userID == '0' ) {
          $scope.stats = [
              {'months_worked' : '30', 'pto_earned': '0'}              
           ]
            // console.log($scope.stats);
        }
        if ( userID == '1' ) {
          $scope.stats = [
              {'months_worked' : '31', 'pto_earned': '1'}              
           ]
        }
        if ( userID == '2' ) {
          $scope.stats = [
              {'months_worked' : '32', 'pto_earned': '2'}              
           ]
        }
        if ( userID == '3' ) {
          $scope.stats = [
              {'months_worked' : '33', 'pto_earned': '3'}              
           ]
        }
        if ( userID == '4' ) {
          $scope.stats = [
              {'months_worked' : '34', 'pto_earned': '4'}              
           ]
        }
        if ( userID == '5' ) {
          $scope.stats = [
              {'months_worked' : '35', 'pto_earned': '5'}              
           ]
        }
    }

});
angular.bootstrap(document.body, ['app']);

document.body.setAttribute('class', 'green');

$("#bert em").on('click',function() { //click on bert
    $(this).toggleClass('orange');
    $(this).children('div').toggleClass('hide');
});

Answer 1

我不认为 ng-click() 有问题。相反，在我看来，可能的问题是您只有一个统计元素供所有用户的 div 使用。

在你的 HTML 中你可能想要替换这个：

<span class="stats"> Months Worked: {{stats[0].months_worked}}, PTO Earned: {{stats[0].pto_earned}}</span>

像这样：

<span class="stats"> Months Worked: {{stats[$index].months_worked}}, PTO Earned: {{stats[$index].pto_earned}}</span>

而在您的 Javascript 中，对于每个 userId 案例，您可能想要更像这样的东西：

$scope.stats[userId] = {'months_worked' : '30', 'pto_earned': '0'}

或者，将统计信息包含在用户对象本身中，并将用户对象本身传递给 ng-click 处理程序。

将 ng-repeat 循环内的 ng-click 隔离到被单击的元素

isolate an ng-click inside of an ng-repeat loop to the element clicked

angularjs

angularjs-ng-repeat

angularjs-ng-click