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? — Rajesh Dixit
– Rajesh Dixit, Commented Dec 5, 2017 at 4:39
@Rajesh Its not about comparing two arrays, question is more intended on how to do it in angularjs — Sajeetharan
– Sajeetharan, Commented Dec 5, 2017 at 4: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 Dixit
– Rajesh Dixit, Commented Dec 5, 2017 at 4:44
If you see that way there are thousands of questions should be closed. — Sajeetharan
– Sajeetharan, Commented Dec 5, 2017 at 4: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 Dixit
– Rajesh Dixit, Commented Dec 5, 2017 at 4:48

Sajeetharan · Accepted Answer · 2017-12-05 04:40:51Z

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 5, 2017 at 4:40

answered Dec 5, 2017 at 4:36

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

8 Comments

Rajesh Dixit Over a year ago

I guess array2.includes(element) should do the trick. That would remove order dependency

Rajesh Dixit Over a year ago

So will every. It is a part of ES6.

sarah Over a year ago

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

Sajeetharan Over a year ago

you dont need to pass since you already have it inside the controller

sarah Over a year ago

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

|

Nico Westerdale · Accepted Answer · 2018-07-19 19:31:03Z

0

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;

edited Jul 19, 2018 at 19:31

answered Jul 19, 2018 at 19:17

Nico Westerdale

2,1961 gold badge24 silver badges31 bronze badges

Collectives™ on Stack Overflow

Comparing two arrays inside ng-if

2 Answers 2

8 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Linked

Related