CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ng-if
FiryCode
FiryCode

Reputation: 189

ng-if on ng-repeat value angular js

hello everyone I have a problem I want to change the value of type in ng-repeat

here is the simple example to explain what I want to say 

let arr = 
[
  {school_id: 1, name: "jon"},
  {school_id: 2, name: "sam"},
  {school_id: 1, name: "sara"},
  {school_id: 2, name: "youfiy"}
]

<ul>
   <li ng-repeat="arr">arr.school_id</li> <!-- here shuld print school name instide of schoolid -->
</ul>

I need in id 1 change school_id to "primarySchool" and in id 2 change to "hightSchool" and so on

Upvotes: 0

Views: 102

Answers (3)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

You need some kind of IF statement, I suggest a simple ternary operator for ID 1 and 2 as your only choices. Here is what it will look like:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.arr = [{
      school_id: 1,
      name: "jon"
    },
    {
      school_id: 2,
      name: "sam"
    },
    {
      school_id: 1,
      name: "sara"
    },
    {
      school_id: 2,
      name: "youfiy"
    }
  ]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <ul>
      <li ng-repeat="school in arr">
        {{ "test/" + ((school.school_id==1) ? "primarySchool" : "hightSchool") + "&" + school.name}}
      </li>
    </ul>

  </div>

</body>

</html>

Even better: just call a function that will return a string that you need. You can have as many if statements inside it, feel free to expand it with any logic. 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.arr = [{
      school_id: 1,
      name: "jon"
    },
    {
      school_id: 2,
      name: "sam"
    },
    {
      school_id: 1,
      name: "sara"
    },
    {
      school_id: 2,
      name: "youfiy"
    }
  ]
  $scope.getURL = function(school) {
    var s = "";
    if (school.school_id == 1) {
      s = "primarySchool";
    } else if (school.school_id == 2) {
      s = "hightSchool";
    }
    return "test/" + s + "&" + school.name;
  }
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <ul>
      <li ng-repeat="school in arr">
        {{ getURL(school) }}
      </li>
    </ul>

  </div>

</body>

</html>

Upvotes: 0

Jawad
Jawad

Reputation: 976

$scope.arr = 
[
    {school_id: 1, name: "jon"},
    {school_id: 2, name: "sam"},
    {school_id: 1, name: "sara"},
    {school_id: 2, name: "youfiy"}
]
 //then there we are using ng-repeat with ng-if
<ul>
    <li ng-repeat="schoolidobj in arr">
    //here if school_id is 1 then this condition is executed
    <div ng-if="schoolidobj.school_id == '1' ">
     primarySchool
    </div>
    //here if school_id is 2 then this condition is executed
    <div ng-if="schoolidobj.school_id == '2' ">
     highSchool
    </div>
    </li> 
</ul>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222532

Use ng-switch and add your condition as you need,

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

app.controller('testCtrl',function($scope){

$scope.arr = 
[
  {school_id: 1, name: "jon"},
  {school_id: 2, name: "sam"},
  {school_id: 1, name: "sara"},
  {school_id: 2, name: "youfiy"}
];

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="testCtrl">
<ul>
   <li ng-repeat="schooldObj in arr"> 
     <div ng-switch on="schooldObj.school_id">
      <div ng-switch-when="1">
         PrimarySchool
      </div>
    <div ng-switch-default>
        hightSchool
    </div>
</div>
 </ul>
</body>

Upvotes: 1

Related Questions