angularjs: loop through an array crossing values with another array in a view

Question

I am struggling with the following. I have a global array1 with the values FileA, FileB, FileC, FileD and FileE. Then I have a specific array2 with the values FileA and FileC.

The output I would want is something like

<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>

I was thinking in a nested ng-repeat with a custom filter, but I am not able to see how to do it.

Here it is an attempt that is not even compiling

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>

and 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/

What's the best approach to follow here?

Cheers

UPDATE: I've solved just by using a filter for each entry that checks if it is inside the array

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

and 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/

However, the impact in the performance of the data processing is very high (large lists of data). This may be unavoidable, but any comment on that is very well welcomed.

Cheers

If you can use an external library like underscore.js, you can use intersect to find the values that are the same in both arrays. — Davin Tryon
– Davin Tryon, Commented Feb 16, 2014 at 0:05

Craig Squire · Accepted Answer · 2014-02-16 00:16:07Z

3

If all you need to do is switch a class based on the other array, try using ng-class and a scope function to check the secondary array.

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;
    }
}]);

answered Feb 16, 2014 at 0:16

Craig Squire

2,14114 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GWorking Over a year ago

I've managed to do it through a filter. I assume that the performance of your solution and mine must be very similar?

Craig Squire Over a year ago

Probably not enough of a difference to bother discussing. Maybe the filter has better performance since mine must make the isMatch() call twice for each iteration in the ng-class expression.

GWorking · Accepted Answer · 2014-02-16 00:45:57Z

0

Updated in the question, solved in an easy_to_understand code (IMO), but with a high impact in the perfomance of my code (large lists of data). Any improvement in this sense is very well welcomed

answered Feb 16, 2014 at 0:45

GWorking

4,38111 gold badges58 silver badges97 bronze badges

Collectives™ on Stack Overflow

angularjs: loop through an array crossing values with another array in a view

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related