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>

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

＆＃13;

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';
    
    }
    
    
  });

＆＃13;

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

＆＃13;

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

＆＃13;

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>
</div>

我希望这会对你有所帮助。

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>

ng-if在ng-repeat上调用函数

4 个答案: