Question

我目前有两个正在比较的列表。一个显示颜色列表，另一个是选择特定颜色的名称列表。这很容易显示。可以在此处找到一个示例小提琴：https://jsfiddle.net/37dq96tj/

<div ng-repeat="eachColor in colors">

    {{eachColor.name}} Selected By: ->

    <span ng-repeat="eachName in names" ng-if="eachName.catid == eachColor.id">
          {{eachName.name}}
    </span>
</div>

我认为很容易做到的问题就是显示“＃34; none＆＃34;如果没有列出该颜色的名称。我想我可以这样做，只有一个名字在第二个列表中才有效。请参阅：https://jsfiddle.net/37dq96tj/2

{{eachColor.name}} Selected By: ->

<span ng-repeat="eachName in names">
    <span ng-if="eachName.catid == eachColor.id">{{eachName.name}}</span>
    <span ng-if="eachName.catid != eachColor.id">NONE</span>
</span>

但是，如果我添加另一个名称，这将无法正常工作。我最终会得到重复的＃34; NONE＆＃34;值。请参阅：https://jsfiddle.net/37dq96tj/4

这看起来很简单，但我还没弄明白。希望有人能指出我正确的方向。

另外，我非常想知道的另一个问题是使用嵌套的ng-repeats这种方式是显示此类数据的理想方式吗？

谢谢！ Ť

Answer 1

而不是使用ng-if可以在数组上使用与ID匹配的过滤器。

过滤器允许您为此过滤后的数组创建别名，然后您可以检查显示的长度＆＃34;无＆＃34;

  <span ng-repeat="eachName in names | filter: {'catid': eachColor.id} as filteredNames">
      {{eachName.name}}
    </span>
    <span ng-if="!filteredNames.length">None</span>

的 DEMO

Answer 2

尝试这样

<div ng-app="appX" ng-controller="appCtrl">
  <h5>COLORS</h5>
  <div ng-repeat="eachColor in colors">

    {{eachColor.name}} Selected By: ->
    <span ng-repeat="name in colorSelectedByUsers(eachColor)">{{ name }}</span>

  </div>

</div>

我创建了一个函数colorSelectedByUsers(color)，它返回单个字符串为“None”的用户或数组数组

var app = angular.module("appX", []);
app.controller("appCtrl", function($scope) {
  $scope.colors = [{
    "id": 0,
    "name": "Red"
  }, {
    "id": 1,
    "name": "Blue"
  }, {
    "id": 2,
    "name": "Green"
  }];

  $scope.names = [{
    "id": 0,
    "catid": 2,
    "name": "Jim"
  },
  { "id": 1,
    "catid": 1,
    "name": "Frank"
  }]

  $scope.colorSelectedByUsers = function(color){
    var users = [];
    for(var u in $scope.names){
        if($scope.names[u].catid == color.id){
        users.push($scope.names[u].name);
      }
    }

    if(users.length == 0){
        users.push("None");
    }

    return users;

  }
});

Angular Nested ng-repeat。比较两个列表。如果找到/未找到则显示

2 个答案: