Comparing two arrays inside ng-if

Question

I have array inside a class, and I have to compare if the arrays are same in 2 different objects of the same class. Currently, I am doing it like this,

<div class="col-md-4">{{ctrl.Obj1.arr1}}
  <span ng-if="ctrl.Obj2 != null && ctrl.Obj1.arr1 != ctrl.Obj2.arr1"
      class="glyphicon glyphicon-alert" style="margin-left: 6px;
     font-size: small; color: palevioletred">
  </span>
</div>

But this is an incorrect way of comparison since it yields different values. My array is of the form: ["string1","string2","string3"]

What's the correct way to do it?

Edit: My question is different because I am asking about how to accomplish this in AngularJS.

Possible duplicate of [How to Compare two Arrays are Equal using Javascript?](https://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript) — Rajesh, Dec 05 '17 at 04:39
@Rajesh Its not about comparing two arrays, question is more intended on how to do it in angularjs — Sajeetharan, Dec 05 '17 at 04:41
@Sajeetharan Is angularJS not a framework on JS? OP is unaware of how to compare arrays and hence he used `arr1 === arr2`. The dupe answers that. Then integrating this logic in angularJS way is his task. — Rajesh, Dec 05 '17 at 04:44
If you see that way there are thousands of questions should be closed. — Sajeetharan, Dec 05 '17 at 04:45
@Sajeetharan lets not debate over it. In my view its dupe, in yours, its not. Others can vote based on their POV. All in all, we both want to help OP and he/she will get something from both. Have a good day. :-) — Rajesh, Dec 05 '17 at 04:48

Sajeetharan · Answer 1 · 2017-12-05T04:40:51.730

2

Instead of doing this comparision in template you should have a function that would return boolean value after comparing and then bind that to the template

ng-if="compareArrays()"

and in controller

$scope.compareArrays = function(){
var result = $scope.array1.length == $scope.array2.length && $scope.array1.every(function(element, index) {
    return element === $scope.array2[index]; 
});
 return result ;
}

edited Dec 05 '17 at 04:40

answered Dec 05 '17 at 04:36

Sajeetharan

216,225
63
350
396

I guess `array2.includes(element)` should do the trick. That would remove order dependency – Rajesh Dec 05 '17 at 04:38
So will every. It is a part of ES6. – Rajesh Dec 05 '17 at 04:40
@Sajeetharan , should I not pass the argument to this function? Like `ng-if="compareArrays(ctrl.Obj1.arr1, ctrl.Obj2.arr1)"`. I am asking because that way, I can re-utilize this function everytime I need to do such a comparison of two such arrays? – sarah Dec 05 '17 at 05:38
you dont need to pass since you already have it inside the controller – Sajeetharan Dec 05 '17 at 05:41
@Sajeetharan, But what if I want to use this function at two different places? I mean to ask, let's say my class has two arrays as attributes (A1 & A2). In the first place, I would like to compare the two values (in two different objects) of A1, and in the second place I would like to compare two values (in two different objects) of A2. Will I have to write another compare function for that then? – sarah Dec 05 '17 at 05:46
If you have the array in controller, you dont need to duplicate this funciton just call this function and pass the parameters – Sajeetharan Dec 05 '17 at 05:47
Oh! That's what I meant to ask. Pass the parameters from the HTML, like, `ng-if=compareArrays(Obj1.A1.arr1, Obj2.A1.arr2)` and in the second place, `ng-if=compareArrays(Obj1.A2.arr1, Obj2.A2.arr2)` and change the function to `function(arr1,arr2)`? – sarah Dec 05 '17 at 05:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160476/discussion-between-sarah-and-sajeetharan). – sarah Dec 05 '17 at 06:04

Nico Westerdale · Answer 2 · 2018-07-19T19:31:03.260

You can use angular.equals to compare two arrays. Supports value types, regular expressions, arrays and objects.

Here's your use case:

<span ng-if="ctrl.Obj2 != null && !angular.equals(ctrl.Obj1.arr1, ctrl.Obj2.arr1)
     class="glyphicon glyphicon-alert" style="margin-left: 6px;
     font-size: small; color: palevioletred">
</span>

Don't forget to add the following to your main app controller: $scope.angular = angular;

Comparing two arrays inside ng-if

2 Answers2