AngularJS ng-if với nhiều điều kiện


151

Tôi muốn biết nếu có thể có một cái gì đó như thế này:

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

Biết rằng các mục là một bộ chứa JSON nhận được thông qua một yêu cầu, vì vậy đó là lý do tại sao tôi đang sử dụng phương thức khóa, giá trị.

Cảm ơn

Tôi đang hỏi bởi vì tôi đã thử googling nó, nhưng kết quả duy nhất tôi có thể nhận được là ng-switch, nhưng tôi phải sử dụng ng-if.


3
Trong JavaScript, toán tử hoặc là ||.
JB Nizet

Câu trả lời:


194

Chắc chắn bạn có thể. Cái gì đó như:

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>

Mã não

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'];

Demo Fiddle


Nếu tôi có 20 trường nhập và tôi phải bật nút gửi chỉ khi tất cả các trường được điền. Trong trường hợp này, tôi phải bao gồm rất nhiều điều kiện. Điều này hơi khó hiểu. Có giải pháp khả thi nào khác không?
Mr_Perinf

@CharanCherry Hãy xem xác thực dạng góc. Bằng cách đó, bạn có thể đặt tất cả các trường mong muốn ng-yêu cầu và kiểm tra tính hợp lệ của biểu mẫu, ví dụ như một biểu thức ng-vô hiệu hóa trên nút gửi. cfr fdietz.github.io/recipes-with-angular-js/USE-forms/ triệt
Gecko IT

76

Toán tử HOẶC:

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

Mặc dù nó đủ đơn giản để đọc, tôi hy vọng là một nhà phát triển, bạn sẽ sử dụng tên tốt hơn 'a' 'k' 'b', v.v.

Ví dụ:

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

Một ví dụ HOẶC khác

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

Toán tử AND (Đối với những người vấp phải câu trả lời stackoverflow này đang tìm kiếm một điều kiện AND thay vì 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>

Ok, vì vậy tất cả các trình duyệt dường như nhận ra đó &là một ký tự hợp lệ. Nhưng cần phải đề cập rằng sử dụng &trong một thuộc tính không phải là html hợp lệ. Xem < html.spec.whatwg.org/multipage/syntax.html#syntax-attribut >, cụ thể hơn: " Xem thêm câu trả lời này: < stackoverflow.com/a/5320217/788553 >.
jmlopez

Nếu chúng ta phải sử dụng các câu lệnh ghép trong html để tạo ra công việc góc cạnh, tôi muốn đặt các câu lệnh ghép vào một hàm được gắn vào phạm vi, do đó loại bỏ logic đó ra khỏi phần html.
jmlopez

HTML5 không được viết với Angular trong tâm trí. Thay vào đó, những người tài giỏi ở google đã viết Angular để thay thế - tận dụng thông số kỹ thuật và do đó viết Biểu thức góc với "&" là rất bình thường. Chắc chắn, tôi không muốn đặt các quy tắc kinh doanh trong Chế độ xem, giống như khi tôi thực hiện các trang Chế độ xem dao động trong asp.net MVC, nhưng câu trả lời của tôi hoàn toàn nằm trong bối cảnh câu hỏi được hỏi.
Tom Stickel 4/11/2015

1
Không có gì sai với câu trả lời của bạn Tom, tôi cũng viết các câu ghép giống như câu bạn thể hiện vì tôi lười biếng (hoặc vội vàng), và nó hoạt động. Nhưng sau đó tôi luôn nhớ quy tắc này về việc trốn thoát &. Đây là lý do tôi vấp phải câu trả lời của bạn. Tôi chỉ muốn đặt các liên kết đó ở đó để làm cho mọi người biết về thông số HTML, như bạn đã nói, "HTML5 không được viết với Angular trong tâm trí".
jmlopez

1

bạn cũng có thể thử với && cho chòm sao bắt buộc nếu cả hai điều khoản đều đúng hơn công việc

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

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

0

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

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

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

Bạn có thể vui lòng kết hợp câu trả lời của bạn thành một và xóa câu trả lời khác không?
Tom M
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.