ng-if on ng-repeat 调用一个函数

Question

我有一个笨蛋：https://plnkr.co/edit/OlLt9XC6cWYnus20ZEaz?p=preview

我有一个 ng-repeat，它调用一个函数并获得 .outcome 的结果，结果是真或假。但是，如果不返回这些值，则默认为 x。

我想做的是对 ng-repeat 值执行 ng-if 以便：

if outcome is true, show icon-true.
if outcome is false, show icon-cross.
if outcome is x, show icon-blank.

HTML：

<div ng-repeat="month in months">
    {[{getData(contents[item._id].contentHistory,year,month.n)}]}
    <!-- <i class="icon-cross" ng-if="getData(contents[item._id].contentHistory,year,month.n == false"></i>
    <i class="icon-true" ng-if="getData(contents[item._id].contentHistory,year,month.n == true"></i>
    <i class="icon-blank" ng-if="getData(contents[item._id].contentHistory,year,month.n == x"></i> -->
</div>

Answer 1

如果您只需要 2 个结果 - true、false 那么你应该使用ng-hide 或ng-show

其他使用ng-switch

<ANY ng-switch="CALL YOUR EXPRESSION">
  <ANY ng-switch-when=true> INSERT TRUE-ICON CODE HERE</ANY>
  <ANY ng-switch-when=false> INSERT FALSE-ICON CODE HERE</ANY>
  <ANY ng-switch-default>INSERT DEFAULT-ICON CODE HERE</ANY>
</ANY

这样，函数只被调用一次。

PS：你的逻辑工作正常，（即使你不应该调用 getData 3 次）。摆脱我在评论中提到的错误。我尝试使用标签代替图标，它有效。

Answer 2

试试这个。定义一个结果变量并在函数中初始化它。

  $scope.outcome = "";
  $scope.getData = function(parameters){
    if(true)
       $scope.outcome = 'show icon-true';
    if(false)
        $scope.outcome = 'show icon-cross';

    }



<div ng-repeat="month in months">
    <i ng-class="{'show icon-true': outcome == true, 'show icon-cross':outcome == false,}"></i>
</div>

我为您的问题提出了另一种解决方案。

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

app.controller("MyCtrl" , function($scope){
    $scope.items = [
       {"name":"Ali","class":"a"},
       {"name":"Reza","class":"b"},
       {"name":"Majid","class":"c"}
     ];
  
  $scope.getData = function(param){
     if(param == 'a')
       return 'a';
     if(param == 'b')
       return 'b';
    
    }
    
    
  });

.a{
  color:red;
  }
.b{
  color:blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   
      <div ng-repeat="item in items">
        
        <p ng-class = "getData(item.class)">{{item.name}}</p>
       </div> 
 
</div>

Answer 3

您可以使用三元运算符通过嵌套来检查所有三个条件。

<div ng-repeat="month in months">
<i ng-class="{getData(contents[item._id].contentHistory,year,month.n)==true ?'show icon-true': (getData(contents[item._id].contentHistory,year,month.n)==false ? 'show icon-cross' : 'show icon-blank')}"></i>

Answer 4

试试这个

<div ng-repeat="month in months">
    <i ng-class="{getData(contents[item._id].contentHistory,year,month.n)==true ?'show icon-true': getData(contents[item._id].contentHistory,year,month.n)==false?'show icon-cross':'show icon-blank'}"></i>
</div>

希望对你有帮助。