AngularJS нг-если с несколькими условиями


151

Я хотел бы знать, возможно ли иметь что-то вроде этого:

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

Зная, что элементы - это JSON-контейнер, полученный через запрос, поэтому я использую метод key, value.

Спасибо

Я спрашиваю, потому что я пытался погуглить, но единственный результат, который я мог получить, был ng-switch, но я должен использовать ng-if.


3
В JavaScript оператор или является ||.
JB Низет

Ответы:


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-required и проверить правильность формы, например, в выражении ng-disabled на кнопке отправки. cfr 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>

Оператор AND (для тех, кто натыкается на этот ответ на стекопоток, ищет условие AND вместо OR)

<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 вместо этого - воспользуйтесь спецификацией, и поэтому написание Angular Expression с помощью «&» - это вполне нормально. Конечно, я предпочитаю не помещать бизнес-правила в представление, так же как и при работе со страницами Razor View в 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.