angularjs:循环遍历视图中与另一个数组交叉的数组

时间:2014-02-15 23:27:54

标签: angularjs

我正在努力解决以下问题。我有一个全局array1,其值为FileA,FileB,FileC,FileD和FileE。然后我有一个特定的array2,其值为FileA和FileC。

我想要的输出类似于

<div class="matched">FileA</div>
<div class="not_matched">FileB</div>
<div class="matched">FileC</div>
<div class="not_matched">FileD</div>
<div class="not_matched">FileE</div>

我正在考虑使用自定义过滤器进行嵌套的ng-repeat,但我无法看到如何执行此操作。

这是一次甚至没有编译的尝试

HTML

<body ng-app="myModule">
<div ng-controller="myController">
    <div ng-repeat="entity in entities">
        <div ng-repeat="myEntity in myEntities |  lookInside(entity)">
            {{myEntity.match}} - {{myEntity.name}}
        </div>
     </div>
</div>
</body>

和js

var myModule = angular.module('myModule', []);

myModule.controller('myController', ['$scope',  function($scope) {
    $scope.entities = ['fileA', 'fileB', 'fileC', 'fileD', 'fileE'];
    $scope.myEntities = ['fileA', 'fileC'];
}]);

myModule.filter('lookInside', function(){
    return function(items, name){
        var arrayToReturn = [];
        var name = {};
        for (var i=0; i<items.length; i++){
            name.match = 'no';
            name.name = items[i];
            if (items[i] == name) {
                name.match = 'si';
            }
            arrayToReturn.push(name);
        }
        return arrayToReturn;
    };
});

http://jsfiddle.net/C5gJr/46/

这里有什么最好的方法?

干杯

更新: 我只是通过为每个条目使用一个过滤器来解决它是否在数组中

<body ng-app="myModule">
<div ng-controller="myController">
    <div ng-repeat="entity in entities">
       {{entity | lookInside: myEntities}}
    </div>
</div>
</body>

和js

var myModule = angular.module('myModule', []);

myModule.controller('myController', ['$scope',  function($scope) {
    $scope.entities = ['fileA', 'fileB', 'fileC', 'fileD', 'fileE'];
    $scope.myEntities = ['fileA', 'fileC'];
}]);

myModule.filter('lookInside', function(){
    return function(item, array){
        var name = 'no';
        for (var i=0; i<array.length; i++){
            if (array[i] == item) {
                name = 'si';
            }
        }
        return name;
    };
});

http://jsfiddle.net/C5gJr/48/

但是,数据处理性能的影响非常大(大型数据列表)。这可能是不可避免的,但对此的任何评论都非常受欢迎。

干杯

2 个答案:

答案 0 :(得分:3)

如果您只需要根据另一个数组切换一个类,请尝试使用ng-class和scope函数来检查辅助数组。

http://jsfiddle.net/VrB3H/

<div ng-repeat="entity in entities" ng-class="{'matched': isMatch(entity), 'not_matched': !isMatch(entity)}">
        {{isMatch(entity)}} - {{entity}}
 </div>

myModule.controller('myController', ['$scope',  function($scope) {
    $scope.entities = ['fileA', 'fileB', 'fileC', 'fileD', 'fileE'];
    $scope.myEntities = ['fileA', 'fileC'];

    $scope.isMatch = function(entity)
    {
        return $scope.myEntities.indexOf(entity) >= 0;
    }
}]);

答案 1 :(得分:0)

在问题中更新,在easy_to_understand代码(IMO)中解决,但对我的代码(大型数据列表)的性能影响很大。这种意义上的任何改进都非常受欢迎