ng-if on ng-repeat value angular js答案

【问题标题】：ng-if on ng-repeat value angular jsng-if on ng-repeat value angular js
【发布时间】：2018-08-01 10:22:24
【问题描述】：

大家好我有一个问题我想更改ng-repeat中type的值

这是一个简单的例子来解释我想说的话

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" 等等

【问题讨论】：

标签： angularjs angularjs-ng-repeat angular-ng-if

【解决方案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>

【讨论】：

这可能适用于其他情况我需要获取 school_id 的值并创建一个 URL 我需要这样的东西 test/priamryschool&john 我希望明白我想说什么
我建议您在控制器级别执行此操作

【解决方案2】：

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

【讨论】：

别着急，学习一下。欢迎您加入这个社区。span>

【解决方案3】：

您需要某种 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>

更好的是：只需调用将返回您需要的字符串的函数。您可以在其中包含尽可能多的 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>

【讨论】：

你是对的，但我需要这个来创建一个 URL 我如何使用它我需要这样的东西 test/primaryschool&jon
@AdelSadek 我改变了格式，希望它看起来像你想要的。
是的，它运作良好 :) 但如果我需要做 else if？
@AdelSadek 最好的办法是使用 ng-switch 和 school_id (1,2,3,4,...) 的不同情况，就像在 Sajeetharan 的例子中一样
@AdelSadek 我添加了另一个解决方案，其函数调用可根据您的需要工作 - 使用 else if（任意数量）