a

Câu hỏi Cách tốt nhất để áp dụng điều kiện một lớp học là gì?


Giả sử bạn có một mảng được hiển thị trong ul với một li cho mỗi phần tử và thuộc tính trên bộ điều khiển được gọi là selectedIndex. Cách tốt nhất để thêm lớp học vào li với chỉ mục selectedIndex trong AngularJS?

Tôi hiện đang nhân đôi (bằng tay) li và thêm lớp vào một trong các li thẻ và sử dụng ng-show và ng-hide để chỉ hiển thị một li trên mỗi chỉ mục.


1132
2017-10-17 10:49


gốc


Câu trả lời cho câu hỏi này cho thấy rằng có nhiều hơn để templating hơn {{varname}}. Tôi có thể tìm tài liệu về những gì nhiều hơn nữa để tạo khuôn mẫu, chẳng hạn như toán tử bậc ba trong một vài dạng khác nhau? docs.angularjs.org/guide/templates dường như không giải thích những gì cung cấp templating về điều kiện vv bên cạnh {{varname.fieldname}}. - JonathanHayward
điều này rất hữu ích cho tôi hy vọng nó sẽ làm việc cho bạn tech-blog.maddyzone.com/javascript/… - Rituraj ratan


Các câu trả lời:


Nếu bạn không muốn đặt tên lớp CSS vào Controller như tôi, đây là một mẹo cũ mà tôi sử dụng kể từ ngày trước v1. Chúng ta có thể viết một biểu thức đánh giá trực tiếp đến một tên lớp đã chọn, không cần chỉ thị tùy chỉnh:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Xin lưu ý cú pháp cũ với dấu hai chấm. 

Ngoài ra còn có một cách tốt hơn để áp dụng các lớp có điều kiện, như:

ng-class="{selected: $index==selectedIndex}"

Angular bây giờ hỗ trợ các biểu thức trả về một đối tượng. Mỗi thuộc tính (tên) của đối tượng này bây giờ được coi là tên lớp và được áp dụng tùy thuộc vào giá trị của nó.

Tuy nhiên, những cách này không hoạt động bình đẳng. Đây là một ví dụ:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

Do đó chúng ta có thể tái sử dụng các lớp CSS hiện có bằng cách ánh xạ cơ bản một thuộc tính mô hình cho một tên lớp và đồng thời giữ các lớp CSS ra khỏi mã Bộ điều khiển.


1367
2017-11-29 11:17



OP, đó có thể là cách tồi tệ nhất để thể hiện toán tử bậc ba mà tôi từng thấy. Bạn đã cân nhắc chưa ($index==selectedIndex) ? 'selected' : '' ? - Malvolio
@Malvolio AFAIR, toán tử ternary không hoạt động trong các biểu thức góc trong v0.9.x. Đây là nhiều hơn hoặc ít hơn một chuyển đổi. - orcun
ng-class (tính đến 1/19/2012) hiện hỗ trợ một biểu thức phải đánh giá hoặc 1) một chuỗi các tên lớp được phân cách bằng dấu cách, hoặc 2) và mảng các tên lớp, hoặc 3) một bản đồ / đối tượng của lớp tên các giá trị boolean. Vì vậy, sử dụng 3): ng-class = "{selected: $ index == selectedIndex}" - Mark Rajcok
Cảm ơn @Mark, BTW bây giờ mà tôi đã kiểm tra tôi có thể nói rằng phương pháp này đang làm việc trong v1. Nó vẫn hữu ích trong một số trường hợp. Lưu ý rằng các tên thuộc tính (khóa) của đối tượng không nhất thiết đúng hoặc sai, nó có thể là bất cứ thứ gì mà bạn có thể muốn ánh xạ tới một tên lớp. - orcun
Tôi chỉ muốn thêm, tôi đã gặp sự cố vì tôi đã sử dụng cú pháp như {classname: '$index === selectedIndex'}      và nó không hoạt động. Khi tôi đẩy tất cả mọi thứ lại với nhau và sử dụng == thay vì === nó hoạt động. {classname: '$index==selectedIndex'} - Lucas


ng-class hỗ trợ một biểu thức phải đánh giá

  1. Một chuỗi các tên lớp được phân cách bằng dấu cách hoặc
  2. Một loạt các tên lớp hoặc
  3. Bản đồ / đối tượng của tên lớp với các giá trị boolean.

Vì vậy, bằng cách sử dụng mẫu 3), chúng ta chỉ cần viết

ng-class="{'selected': $index==selectedIndex}"

Xem thêm Làm cách nào để áp dụng điều kiện kiểu CSS trong AngularJS? cho một câu trả lời rộng hơn.


Cập nhật: Góc 1.1.5 đã thêm hỗ trợ cho một toán tử bậc ba, vì vậy nếu cấu trúc đó quen thuộc hơn với bạn:

ng-class="($index==selectedIndex) ? 'selected' : ''"

432
2017-08-28 01:13



1 cho các toán tử ternary (và tôi cần một cái ngay bây giờ) nhưng 1.1. * Là một 'bản phát hành không ổn định', nơi mà API có thể thay đổi mà không cần thông báo - tính đến thời điểm gõ. 1.0. * Là ổn định, vì vậy tôi sẽ thoải mái hơn với điều đó cho một dự án được triển khai trong tuần tới trong 6 tháng. - Dave Everitt
ng-class="{'selected': $index==selectedIndex}" làm việc cho tôi - Ivana Holm


Phương pháp yêu thích của tôi là sử dụng biểu thức bậc ba.

ng-class="condition ? 'trueClass' : 'falseClass'"

Chú thích: Trong trường hợp bạn đang sử dụng phiên bản cũ hơn của Angular, bạn nên sử dụng phiên bản này thay thế,

ng-class="condition && 'trueClass' || 'falseClass'"

155
2017-09-27 13:39



Điều này đã giúp tôi viết biểu thức này: ng-class="property.name=='timestamp' ? 'property-timestamp' : 'property-'+{{$index}}". Không thể tìm ra cách nào khác. - dduft
Tôi thực sự không tìm thấy lý do tại sao phương thức boolean modalFlag của tôi không cập nhật - ng-class = "{'closed": modalFlag,' open ':! ModalFlag} "Tôi đang cố gắng thêm hoặc đóng hoặc mở tùy thuộc vào biến có phạm vi / boolean - nếu có ai có thể giúp tôi rất biết ơn - hãy cảm ơn bạn. - landed
Điều này đã được giới thiệu là phiên bản 1.5. github.com/angular/angular.js/commit/… - Mubashir Koul


Tôi sẽ thêm vào điều này, bởi vì một số câu trả lời có vẻ lỗi thời. Đây là cách tôi làm điều đó:

<class="ng-class:isSelected">

Trong đó 'isSelected' là một biến javascript được định nghĩa trong bộ điều khiển góc cạnh.


Để cụ thể hơn giải quyết câu hỏi của bạn, dưới đây là cách bạn có thể tạo danh sách với câu hỏi đó:

HTML 

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS 

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}


Xem: http://jsfiddle.net/tTfWM/

Xem: http://docs.angularjs.org/api/ng.directive:ngClass


53
2017-09-27 02:01



Whats khác nhau giữa class = "ng-class: item.isSelected" và ng-class = "item.isSelected" - zloctb
Tò mò về việc sử dụng ng-class:className so với chỉ sử dụng class="{{className}}" ? - Roi


Đây là một giải pháp đơn giản hơn nhiều:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>


46
2017-10-17 13:55



Tôi rất khuyên bạn nên giữ cho bộ điều khiển của bạn rõ ràng về công cụ CSS. Đó là một con đường bạn không muốn đi xuống. - leviathan
Tên lớp thuộc về mẫu - Casey
Tại một số điểm, jsfiddle có thể bỏ lỡ thanh toán hóa đơn của họ hoặc chọn chuyển sang miền khác hoặc những người chịu trách nhiệm bị xe buýt giết chết (xem thêm Yếu tố xe buýt). Vì vậy, tôi có thể yêu cầu bạn giải thích những gì fiddle đó, trong câu trả lời của bạn? Đây cũng là kinh điển trên tràn ngăn xếp. - Sebastian Mach


Tôi đã gặp một vấn đề tương tự gần đây và quyết định chỉ tạo một bộ lọc có điều kiện:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

Nó lấy một đối số đơn lẻ, một mảng gồm 2 phần tử hoặc một chuỗi, được chuyển thành một mảng được nối thêm một chuỗi trống làm phần tử thứ hai:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

26
2017-07-26 07:53



tôi để tôi chỉ tạo ra cho exemple một yesNo () lọc trở về lớp 'có' hoặc 'không' theo một giá trị boolean 1 o 0: filter('yesNo', function() { return function(input) { // info('yesNo('+ input +')'); switch(input){ case '1': return ' yes '; break; default: return ' no '; break; } } }); - svassr
ng-class có thể xử lý một bản đồ / đối tượng của tên lớp thành các giá trị boolean, vì vậy bạn có thể chỉ cần viết như sau: ng-class = "{yes: some_boolean_expression, no: some_other_boolean_expression}" Ví dụ, ng-class = "{yes: input , no:! input} " - Mark Rajcok


Nếu bạn muốn vượt ra ngoài đánh giá nhị phân và giữ CSS của bạn khỏi bộ điều khiển, bạn có thể triển khai một bộ lọc đơn giản đánh giá đầu vào dựa vào đối tượng bản đồ:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

Điều này cho phép bạn viết đánh dấu của bạn như thế này:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

21
2017-09-04 14:35



Hi @ Joe, bất kỳ ý tưởng làm thế nào để xử lý các giá trị null? Nếu tôi vượt qua trong null trong đầu vào, nó sẽ không bản đồ lớp của nó ... - user1191559
@ user1191559 - bạn có thể một mục 'mặc định' vào bản đồ, sau đó trả về giá trị đó nếu 'đầu vào' là null. - Joe Steele


Toán tử bậc ba Vừa mới được thêm vào trình phân tích cú pháp góc trong 1.1.5.

Vì vậy, cách đơn giản nhất để thực hiện việc này là:

ng:class="($index==selectedIndex)? 'selected' : ''"

15
2018-05-23 08:32



Cũng thế: class="otherClass ng-class:($index==selectedIndex)? 'selected' : '';". - peter