Question

我为措辞严厉的问题道歉，我是Angularjs的新手。使用ng-repeat和ng-click从控制器请求其他信息。执行ng-click时，所有用户都会更新，因为它们属于ng-repeat。

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

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

jsfiddle这里有示例代码：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()上。相反，在我看来，可能的问题是你只有一个统计元素被所有用户使用＆＃39; 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隔离到单击的元素

1 个答案: