여러 조건이있는 AngularJS ng-if


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에서 or 연산자는 ||입니다.
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 5

@CharanCherry 각도 형식 검증을 살펴보십시오. 이를 통해 제출 버튼의 ng-disabled 표현식과 같이 필요한 모든 필수 필드를 설정하고 양식 유효성을 확인할 수 있습니다. cfr fdietz.github.io/recipes-with-angular-js/using-forms/…
Gecko IT가

76

OR 연산자 :

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

다른 OR 예

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

AND 연산자 (이 스택 오버 플로우 응답에서 걸림돌이되어 OR 조건 대신 AND를 찾는 경우)

<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을 작성하는 것은 매우 정상입니다. 물론, asp.net MVC에서 Razor View 페이지를 수행 할 때와 마찬가지로 비즈니스 규칙을 View에 배치하지 않는 것이 좋습니다.
Tom Stickel

1
당신의 대답 Tom에는 아무런 문제가 없습니다. 저는 게 으르거나 서두르 기 때문에 당신이 보여주는 것과 같은 복합 진술을 작성합니다. 그러나 나는 항상 탈출에 관한이 규칙을 기억합니다 &. 이것이 내가 당신의 대답을 우연히 발견 한 이유입니다. "HTML5는 Angular를 염두에두고 작성되지 않았습니다."
jmlopez 2016

1

또한 조건이 모두 일보다 필수 인 경우 필수 constion에 &&를 사용해 볼 수도 있습니다

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

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

0

자바 스크립트 코드

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>

자바 스크립트 코드

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";
}
}

답을 하나로 결합하고 다른 것을 삭제할 수 있습니까?
Tom M
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.