ng-if on ng-repeat value angular js

Question

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

Sajeetharan · Accepted Answer · 2018-08-01 10:28:13Z

1

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>

answered Aug 1, 2018 at 10:28

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

FiryCode Over a year ago

this maybe work in other situation I need to take the value of school_id and make a URL i need something like this test/priamryschool&john I hope to understand what I want to say

Sajeetharan Over a year ago

i would recommend you to do that in the controller level

Jawad · Accepted Answer · 2018-08-01 11:11:32Z

0

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

edited Aug 1, 2018 at 11:11

answered Aug 1, 2018 at 10:58

Jawad

98610 silver badges11 bronze badges

1 Comment

MRizwan33 Over a year ago

don't worry get learn the things. And you are welcome in this community.

Aleksey Solovey · Accepted Answer · 2018-08-01 11:13:19Z

0

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>

edited Aug 1, 2018 at 11:13

answered Aug 1, 2018 at 10:28

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

5 Comments

FiryCode Over a year ago

you're right but I need this to make a URL how can I use it I need something like this test/primaryschool&jon

Aleksey Solovey Over a year ago

@AdelSadek I changed the format, hopefully it looks like what you wanted.

FiryCode Over a year ago

yes, it works well :) but if I need to make else if?

Aleksey Solovey Over a year ago

@AdelSadek best bet is to use ng-switch with different cases for school_id (1,2,3,4,...) like in the example of Sajeetharan

Aleksey Solovey Over a year ago

@AdelSadek I added another solution with a function call that works as you need it - with else if (as many as you like)

Collectives™ on Stack Overflow

ng-if on ng-repeat value angular js

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related