ng-if on ng-repeat value angular js

Question

大家好我有一个问题我想更改 ng-repeat

中类型的值

这里用简单的例子来说明我想说的

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>

我需要在 id 1 中将 school_id 更改为 "primarySchool" 并在 id 2 中更改为 "hightSchool" 等等

Answer 1

使用ng-switch并根据需要添加您的条件，

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>

Answer 2

您需要某种 IF 语句，我建议将 ID 1 和 2 的简单三元运算符作为您唯一的选择。这是它的样子：

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>

更好：只需调用一个函数即可 return 您需要的字符串。你可以在里面有尽可能多的 if 语句，随意用任何逻辑扩展它。

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>

Answer 3

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

ng-if on ng-repeat value angular js

ng-if on ng-repeat value angular js

angularjs

angularjs-ng-repeat

angular-ng-if