Câu trả lời:
Cập nhật : Angular 1.1.5 đã thêm một toán tử ternary , vì vậy bây giờ chúng ta chỉ cần viết
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">Nếu bạn đang sử dụng phiên bản Angular trước đó, hai lựa chọn của bạn là:
(condition && result_if_true || !condition && result_if_false){true: 'result_if_true', false: 'result_if_false'}[condition]mục 2. ở trên tạo ra một đối tượng có hai thuộc tính. Cú pháp mảng được sử dụng để chọn thuộc tính có tên true hoặc thuộc tính có tên false và trả về giá trị liên quan.
Ví dụ,
<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>$ đầu tiên được đặt thành true bên trong một lặp lại ng cho phần tử đầu tiên, do đó, ở trên sẽ áp dụng lớp 'myClass1' và 'myClass2' chỉ lần đầu tiên qua vòng lặp.
Với ng-class có một cách dễ dàng hơn: ng-class có một biểu thức phải đánh giá theo một trong các cách sau:
Một ví dụ về 1) đã được đưa ra ở trên. Đây là một ví dụ về 3, mà tôi nghĩ đọc tốt hơn nhiều:
<li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>Lần đầu tiên thông qua một vòng lặp lặp lại, lớp myClass được thêm vào. Lần thứ 3 đến (chỉ số $ bắt đầu từ 0), lớp AnotherClass được thêm vào.
ng-style lấy một biểu thức phải đánh giá thành bản đồ / đối tượng của các tên kiểu CSS thành các giá trị CSS. Ví dụ,
<li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>ng-stylecập nhật, nhưng dường như chỉ được đánh giá khi phần tử được hiển thị lần đầu tiên. (Noob góc cạnh ở đây)
Cập nhật: Angular 1.1.5 đã thêm một toán tử ternary, câu trả lời này chỉ đúng với các phiên bản trước 1.1.5. Cho 1.1.5 trở lên, xem câu trả lời hiện được chấp nhận.
Trước góc 1.1.5:
Hình thức của một con chim nhạn trong angularjs là:
((condition) && (answer if true) || (answer if false))Một ví dụ sẽ là:
<ul class="nav">
<li>
<a href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
</li>
<li>
<a href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
</li>
</ul>hoặc là:
<li ng-disabled="currentPage == 0" ng-click="currentPage=0" class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>Đến bây giờ, tất cả chúng ta đã tìm ra phiên bản 1.1.5 đi kèm với một ternary thích hợp trong $parsechức năng, vì vậy chỉ cần sử dụng câu trả lời này như một ví dụ về các bộ lọc:
angular.module('myApp.filters', [])
.filter('conditional', function() {
return function(condition, ifTrue, ifFalse) {
return condition ? ifTrue : ifFalse;
};
});Và sau đó sử dụng nó như là
<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>Đó là: toán tử ternary đã được thêm vào trình phân tích cú pháp góc trong 1.1.5 ! xem thay đổi
Dưới đây là một câu đố cho thấy toán tử ternary mới được sử dụng trong chỉ thị ng-class.
ng-class="boolForTernary ? 'blue' : 'red'"Mặc dù bạn có thể sử dụng condition && if-true-part || if-false-part-syntax trong các phiên bản cũ hơn của góc, toán tử ternary thông thường condition ? true-part : false-partcó sẵn trong Angular 1.1.5 trở lên .
<body ng-app="app">
<button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'" class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
<div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
<div class="panel-heading">Take Quiz</div>
<div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">
<button type="button" class="btn btn-default">Start Quiz</button>
</div>
</div>
</body>Nút chuyển đổi và thay đổi tiêu đề của nút và hiển thị / ẩn bảng div. Xem Plunkr