Question

我有一个需要在我的视图中检查的条件：如果用户列表中的任何用户与另一个用户具有相同的名称，我想显示他们的年龄。

像

这样的东西

<div ng-repeat="user in userList track by $index">
 <span class="fa fa-check" ng-if="user.isSelected"></span>{{user.firstName}} <small ng-if="true">{{'AGE' | translate}} {{user.age}}</small>
</div>

除了我错过了正确的条件

Answer 1

您可能应该在控制器中运行一些代码，为用户对象添加一个标志，以指示他/她是否具有另一个用户共享的名称。

您希望最小化ng-repeat内部的逻辑数量，因为该逻辑将针对每个ng-repeat $digest中的每个项运行。

我会做这样的事情：

<强>控制器

var currUser, tempUser;
for (var i = 0; i < $scope.userList.length; i++) {
  currUser = $scope.userList[i];
  for (var j = 0; j < $scope.userList.length; j++) {
    if (i === j) continue;
    var tempUser = $scope.userList[j];
    if (currUser.firstName === tempUser.firstName) {
      currUser.showAge = true;
    }
  }
}

<强> HTML

ng-if='user.showAge'

编辑：实际上，您可能不想在控制器中执行此操作。如果这样做，它会在每次控制器加载时运行。你只需要发生一次。要知道这应该发生在哪里，我必须看到更多代码，但我认为它应该在添加用户时发生。

Answer 2

您可以模拟 hashmap键/值，并检查您的地图是否已获取属性名称。此外，您可以为 $ scope.userList

中的每个对象添加 show 属性

<强>控制器

(function(){

function Controller($scope) {

var map = {};

$scope.userList = [{
  name:'toto',
  age: 20,
  show: false
}, {
  name:'titi',
  age: 22,
  show: false
}, {
  name: 'toto',
  age: 22,
  show: false
}];

$scope.userList.forEach(function(elm, index){
  //if the key elm.name exist in my map
  if (map.hasOwnProperty(elm.name)){
    //Push the curent index of the userList array at the key elm.name of my map
    map[elm.name].push(index);
    //For all index at the key elm.name
    map[elm.name].forEach(function(value){
      //Access to object into userList array with the index
      //And set property show to true
      $scope.userList[value].show = true;
    });
  } else {
    //create a key elm.name with an array of index as value
    map[elm.name] = [index];
  }
});


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

<强> HTML

  <body ng-app="app" ng-controller="ctrl">

    <div ng-repeat="user in userList track by $index">
     <span class="fa fa-check"></span>{{user.name}} <small ng-if="user.show">{{'AGE'}} {{user.age}}</small>
    </div>


  </body>

Angular js比较

2 个答案: