AngularJS ng - якщо з кількома умовами


151

Я хотів би знати, чи можливо щось подібне:

div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
    <!-- SOME CONTENT -->
</div>

Знаючи, що елементи є контейнером JSON, отриманим через запит, тому я використовую метод ключа, значення.

Дякую

Я запитую, тому що я спробував це погуглювати, але єдиний результат, який я міг отримати, - це ng-switch, але я повинен використовувати ng-if.


3
У JavaScript - або оператор ||.
JB Nizet

Відповіді:


194

Звичайно, ти можеш. Щось на зразок:

HTML

<div ng-controller="fessCntrl">    
     <label ng-repeat="(key,val) in list">
       <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
         <div ng-if="key == 'City' || key == 'County'">
             <pre>City or County !!! {{$parent.localityTypeRadio}}</pre>
         </div>
         <div ng-if="key == 'Town'">
             <pre>Town!!! {{$parent.localityTypeRadio}}</pre>
         </div>        
      </label>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

    $scope.localityTypeRadio = 'City';
});

fessmodule.$inject = ['$scope'];

Демо- скрипка


Якщо у мене є 20 полів введення, я повинен увімкнути кнопку подання лише у тому випадку, якщо всі поля заповнені. У цьому випадку я повинен включати стільки умов. Це трохи заплутано. Чи є якесь інше здійсненне рішення?
Mr_Perfect

@CharanCherry Погляньте на перевірку кутової форми. Таким чином, ви можете встановити всі потрібні поля, необхідні для ng, і перевірити правильність форми, наприклад, вираз ng-disabled на кнопці подання. ЧФР fdietz.github.io/recipes-with-angular-js/using-forms / ...
Gecko IT

76

АБО оператор:

<div ng-repeat="k in items">
    <div ng-if="k || 'a' or k == 'b'">
        <!-- SOME CONTENT -->
    </div>
</div>

Хоча читати досить просто, я сподіваюся, що ви як розробник використовуєте кращі імена, ніж 'a' 'k' 'b' тощо.

Наприклад:

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin || group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Інший приклад АБО

<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>

І оператор (Для тих, хто стикається з цією відповіддю stackoverflow, що шукає І замість умови АБО)

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin && group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Гаразд, тому всі браузери, схоже, визнають &дійсний символ. Але слід зазначити, що використання &в атрибуті не є дійсним html. Див. < Html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, точніше: "Значення атрибутів є сумішшю текстових та символьних посилань, за винятком додаткового обмеження, що текст не може містити неоднозначну амперсанд. " Дивіться також цю відповідь: < stackoverflow.com/a/5320217/788553 >.
jmlopez

Якщо нам потрібно використовувати складені висловлювання в html для виконання кутових робіт, я вважаю за краще поставити складені оператори у функцію, приєднану до області, тим самим видаляючи цю логіку від розділу html.
jmlopez

HTML5 не був написаний з урахуванням Angular. Натомість геніальні хлопці в google написали Angular, щоб замість цього - скористатися специфікацією, і, таким чином, написання кутового виразу з "&" - це нормально. Звичайно, я вважаю за краще не розміщувати бізнес-правила у «Перегляді», як коли я роблю сторінки «Перегляд бризок» на asp.net MVC, але моя відповідь повністю в контексті запитуваного питання.
Том Стікель

1
У вашій відповіді Тома немає нічого поганого, я також пишу складні заяви, як ті, які ви показуєте, тому що я лінивий (або поспішаю), і це працює. Але тоді я завжди пам’ятаю це правило про втечу &. Це причина, на яку я натрапив на вашу відповідь. Я просто хотів розмістити ці посилання там, щоб люди знали про специфікацію HTML, як ви сказали: "HTML5 не був написаний з урахуванням Angular".
jmlopez

1

Ви також можете спробувати && для обов'язкової їжі, якщо обидва умови справжні, ніж робота

//div ng-repeat="(k,v) in items"

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>

0

JavaScript-код

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

0

HTML-код

<div ng-app>
<div ng-controller='ctrl'>
    <div ng-class='whatClassIsIt(call.state[0])'>{{call.state[0]}}</div>
    <div ng-class='whatClassIsIt(call.state[1])'>{{call.state[1]}}</div>
    <div ng-class='whatClassIsIt(call.state[2])'>{{call.state[2]}}</div>
    <div ng-class='whatClassIsIt(call.state[3])'>{{call.state[3]}}</div>
    <div ng-class='whatClassIsIt(call.state[4])'>{{call.state[4]}}</div>
    <div ng-class='whatClassIsIt(call.state[5])'>{{call.state[5]}}</div>
    <div ng-class='whatClassIsIt(call.state[6])'>{{call.state[6]}}</div>
    <div ng-class='whatClassIsIt(call.state[7])'>{{call.state[7]}}</div>
</div>

JavaScript-код

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

Чи можете ви поєднати свої відповіді в одне і видалити іншу?
Том М
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.