ng-if на ng-repeat, который вызывает функцию

У меня есть планкер: https://plnkr.co/edit/OlLt9XC6cWYnus20ZEaz?p=preview

У меня есть ng-repeat, который вызывает функцию и получает результат .outcome, который может быть либо истинным, либо ложным. Однако, если эти значения не возвращаются, по умолчанию используется значение x.

Я хочу попытаться выполнить ng-if для значения ng-repeat, чтобы:

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>

javascript angularjs angularjs-ng-repeat angular-ng-if ng-class
person Oam Psy    schedule 08.03.2016    source источник
comment
что такое x? Это строка?   -  person mgilson    schedule 08.03.2016
comment
@mgilson да, это .. взгляните на контроллер в плункере   -  person Oam Psy    schedule 08.03.2016
comment
Вам нужно сравнить с 'x' и НЕ x, так как это не переменная, а значение. И закройте круглые скобки на getDatacall. Если это исправлено, код работает нормально. Что-то не так с вашими стилями/значками, я не углублялся, пробовал использовать метки вместо значков. работал.   -  person Dushyant Bangal    schedule 09.03.2016

Ответы (4)


arrow_upward
3
arrow_downward

Если вам нужно только 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 раза). Избавьтесь от ошибок, которые я упомянул в комментарии. Я пробовал использовать ярлыки вместо значков, это работает.

person Dushyant Bangal    schedule 08.03.2016
comment
у вас есть рабочий пример? Кажется, я не могу заставить переключатель работать. - person Oam Psy; 08.03.2016
comment
Не копируйте и не вставляйте код с сайта angular, он недостаточно конструктивен, учитывая, что я предоставил планкер, который указывает на то, что я уже консультировался с документами angular. - person Oam Psy; 08.03.2016
comment
Извините, но в вашем плункере было много ошибок, которые предполагали, что вы НЕ обращались к документам angular. Вам нужно сравнить с 'x' и НЕ x, так как это не переменная, а значение. И закройте круглые скобки для вызова getData. Если это исправлено, код работает нормально. Что-то не так с вашими иконками, я не углублялся, пробовал использовать ярлыки вместо иконок. работал. - person Dushyant Bangal; 09.03.2016

arrow_upward
1
arrow_downward

попробуй это. определить переменную результата и инициализировать ее в функции.

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

person Hadi J    schedule 08.03.2016
comment
Спасибо, а откуда взялся :outcome? Я использую {[{getData(contents[item._id].contentHistory,year,month.n)}]}, чтобы получить результат. - person Oam Psy; 08.03.2016
comment
@shershen, вы правы, это не синтаксис ng-класса. - person Oam Psy; 08.03.2016
comment
@hadiJZ - отрицательный голос был до вашего обновления, плюс вы не сказали, откуда пришел результат - person Oam Psy; 08.03.2016

arrow_upward
0
arrow_downward

Вы можете использовать тернарный оператор для проверки всех трех условий, вложив его.

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

person Vigneshwarr    schedule 08.03.2016

arrow_upward
0
arrow_downward

Попробуй это

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

Я надеюсь, что это поможет вам.

person Shailendra Singh Deol    schedule 08.03.2016
comment
это полностью исключает третий вариант, упомянутый в op, поэтому это решение изначально пропустило тему - person Patrick Kelleter; 08.03.2016
comment
@PatrickKelleter Я соответственно обновил свой ответ. Пожалуйста, проверьте сейчас. - person Shailendra Singh Deol; 08.03.2016
comment
это лучше, потому что сейчас подходит к вопросу, но менее производительно, потому что приходится вызывать функцию дважды. но, по крайней мере, теперь это правильный ответ, даже если он не лучший :) - person Patrick Kelleter; 08.03.2016
comment
Спасибо за ответ, но вызывать функцию 3 раза крайне неэффективно - person Oam Psy; 08.03.2016
comment
Это всегда по умолчанию показывает пустое значение - вы проверяли это ?? - person Oam Psy; 08.03.2016