Angularjs使用ng-if进行选择性ng-repeat

时间:2015-05-14 21:14:31

标签: javascript angularjs

我有以下数组:

$scope.selected_items = [
    {id: "12345"},
    {id: "67890"}
]

$scope.list_items = [
    { id: "12345", name: "first", more: "data" },
    { id: "22222", name: "second", more: "data2" },
    { id: "33333", name: "third", more: "data3" },
]

我正在尝试列出$scope.list_itemsid $scope.selected_itemsng-if不存在的所有项目。我知道我必须对<div ng-repeat="data in list_items" ng-if="????"> {{ data.name }} </div> 做点什么,但我无法弄清楚要做什么。

{{1}}

有人能帮我解决这个问题吗?

4 个答案:

答案 0 :(得分:2)

如果在数组本身中选择了对象,我建议存储信息。

e.g:

的javascript

MyClass.findAllByParent(parent)

HTML

$scope.list_items = [
    { id: "12345", name: "first", more: "data", selected: true },
    { id: "22222", name: "second", more: "data2" },
    { id: "33333", name: "third", more: "data3" selected: true },
]

答案 1 :(得分:1)

由于您提到您无法将所选状态保留在list_items数组本身中。您可以调用ng-if中的函数,并使用函数检查所选项是否存在。

<div ng-repeat="data in list_items" ng-if="checkItem(data)">
    {{ data.name }}
  </div>

该功能将如下所示,

$scope.checkItem = function(item)
  {
    for(var i=0;i<$scope.selected_items.length;i++)
    {
      var sItem = $scope.selected_items[i];
      if(sItem.id===item.id)
        return false;
    }
    return true;
  }

plnkr link http://plnkr.co/edit/3a4zoKIKFABAmif0fKFt?p=preview

答案 2 :(得分:1)

如果必须按照示例中的方式分隔,最好的办法是创建一个包含要重复项目的新数组。

所以你要做的是类似的事情:

$scope.newList = [];
for (var i=0; $scope.list_items.length < i; i++) {
  for (var s=0; $scope.selected_items.length < s; s++) {
    if ($scope.selected_items[s].id == $scope.list_items[i].id) {
       $scope.newList.push($scope.list_items[i]);
    }
}

理想的做法就是把我上面的人说出来,把所有这些都保存在一个对象中,然后只显示一个:true / false标志。

答案 3 :(得分:1)

嗯,正确的模式是使用AngularJS过滤器。

您只需将过滤器添加到ngRepeat:

myApp.filter('selectedItems', function () {
    return function (values, selectedItemsArr) {
        console.log(values, selectedItemsArr)

        var arrayToReturn = [];
        // Loops through the values in the list
        for (var i = 0; i < values.length; i++) {

            // Now loops through the selected items array to see if it matches
            for (var l = 0; l < selectedItemsArr.length; l++) {
                 if (values[i].id === selectedItemsArr[l].id) {
                    arrayToReturn.push(values[i]);
                }
            }
        }

        return arrayToReturn;
    };
});

此处示例:http://jsfiddle.net/Nitrium/3vcs445c/1/