Angular嵌套的ng-repeat。比较两个列表。显示如果找到/未找到

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> 

我现在面临的问题，我认为将是很容易做到，会显示“无”字，如果没有名列该颜色。我认为我可以这样做，如果只有一个名字在第二个列表中，那么这种方法可行。请参阅：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> 

但是，如果我添加其他的名字，这是不行的。我最终会得到重复的“无”值。见：https://jsfiddle.net/37dq96tj/4

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

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

谢谢！ 牛逼

Answer 1

而不是使用ng-if可以使用的单串阵列上的一个过滤器，它将与id相匹配。

的过滤器可用于创建此过滤阵列的别名，然后可以检查长度来显示“无”

<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)返回用户或数组的数组“无”

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; 

    } 
});