CODEWITHSUNDEEP
javascriptangularjsjson
Manel Alonso
Manel Alonso

Reputation: 397

Show different buttons matching array values

So here's my problem, i'm using AngularJS and i'm getting JSON from PHP, and displaying all my data with ng-repeat. I already have done this.

Now I want to check if some data is in "Array1" and if it is, change the correspndent data from the ng-repeat. I know it sounds really weird, but let me put an example with code:

Here's array1 values

    {
       "23",
       "48",
       "51"
    }

So when i get the data, it's something like this:

{
  id : "23",
  name: "example"
}

And for every JSON object i'm using ng-repeat to display them all like this:

    <div ng-model="data.posts" ng-repeat="post in posts | orderBy:'-' | unique: 'id'">
    ...
       <button>This button will show if "id" matches</button>
       <button>This button will show if "id" not matches</button>
    </div>

I want to compare if an id of array1 matches an id from the JSON data and if it matches show one button and if not show other.

I'm on this like 2 weeks, and i can't get the problem solved, and i don't see any way to get it.

Thx for reading at least and sorry for my bad english!

Upvotes: 0

Views: 60

Answers (3)

Shaishab Roy
Shaishab Roy

Reputation: 16805

Your array1 should be an array and can add a function in controller to check match id.

in controller:

$scope.array1 = ["23","48","51"];
$scope.checkInArray1 = function(id) {
  var index = $scope.array1.indexOf(id);
  if(index < 0){
    return false;
  } else {
    return true;
  }
};

and in your html:

<button ng-if="checkInArray1(post.id)">This button will show if "id" matches</button><br>
<button ng-if="!checkInArray1(post.id)">This button will show if "id" not matches</button>

Upvotes: 1

Austin
Austin

Reputation: 1291

https://jsfiddle.net/alair016/4wc44on1/ 

<div ng-app='myApp' ng-controller="MyCtrl">
    <div ng-model="data.posts" ng-repeat="post in data.posts">
         <button ng-if="array1.indexOf(post.id) >-1">{{post.name}} id matches</button>
         <button ng-if="array1.indexOf(post.id) == -1">{{post.name}} id does not match</button>
    </div>
</div>

var myApp = angular.module('myApp',[])
.controller('MyCtrl', ['$scope', function($scope) {
    $scope.array1 = ["23","48","51"];
    $scope.data = {
        posts : [
        {
          id : "23",
          name: "example"
        },
        {
          id: "24",
          name:"second example"
        }
        ]
    };
}]);

Upvotes: 0

Ken Johnson
Ken Johnson

Reputation: 1

Making the assumption that {"23","48","51"} should be a array ["23","48","51"] You could do something like this: Working Fiddle: http://jsfiddle.net/ravenous52/rgyom4yd/ 

myApp.controller('MyCtrl', ['$scope',
  function($scope) {
    $scope.knownIds = ["23", "48", "51"];
    $scope.data = {
      posts: [{
        id: "23",
        name: "example23"
      }, {
        id: "51",
        name: "example51"
      }, {
        id: "99",
        name: "example99"
      }]
    }
  }
]);
<section ng-controller="MyCtrl">
  <div ng-repeat="post in data.posts">
    <button ng-show="knownIds.indexOf(post.id) >-1">This button will show if "id" matches</button>
    <button ng-hide="knownIds.indexOf(post.id) >-1">This button will show if "id" not matches</button>
  </div>
</section>

Upvotes: 0

Related Questions