NG-如果NG-重复调用一个函数

我有一个plunker：https://plnkr.co/edit/OlLt9XC6cWYnus20ZEaz?p=preview NG-如果NG-重复调用一个函数

我有一个NG重复，调用一个函数，并得到的.outcome的结果，其中，要么是真的还是假的。但是，如果这些值未返回，则默认值为x。

什么，我想尝试做的是执行NG-如果在NG-重复值，以便：

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>

来源

2016-03-08 Oam Psy

是什么'x'？它是一个字符串吗？ – mgilson

@mgilson是的，它是... –

你需要用''x''和NOT'x'作为它不是一个变量，但值来比较看看在plunker控制器。并将圆括号关闭到'getData'call。如果更正，代码工作正常。你的风格/图标有些问题，我没有深入，尝试使用标签而不是图标。工作。 –

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

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

来源

2016-03-08 07:12:28

谢谢，结果来自哪里？我正在使用{[{getData（contents [item._id] .contentHistory，year，month.n）}]}来获得我的结果。 –

这看起来并不像正确纳克级语法 – shershen

@shershen你是正确的，即不纳克级的语法。 –

试试这个

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

我希望这会帮助你。

来源

2016-03-08 07:19:30

这完全离开了由运提到的第三个选项，因此该解决方案无缘摆在首位 –

@PatrickKelleter的话题我已经更新了我的答案因此。请立即检查。 –

这是更好，因为它适合现在的问题，但它是高性能的少，因为它有两次调用该函数。但现在至少它的正确答案，即使它不是最好:) –

如果你只需要2的结果 - 真，假那么你应该使用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次）。摆脱我在评论中提到的错误。我尝试使用标签代替图标，它的工作原理。

来源

2016-03-08 07:23:42

你有没有工作的例子？我似乎无法让开关工作。 –

不要从角度网站复制和粘贴代码，因为它提供了一个高度表明我已经咨询过角度文档的深度代码。 –

对不起，但你的运动员有很多错误，这表明你没有咨询角度文档。你需要比较'x''而不是'x'，因为它不是一个变量而是一个值。并关闭圆括号到getData调用。如果更正，代码工作正常。 Theres错误的图标，我没有深入，尝试使用标签，而不是图标。工作。 –

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

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

来源

2016-03-08 08:01:27 Vigneshwarr

NG-如果NG-重复调用一个函数

回答

相关问题