Hướng dẫn ng-class của AngularJS

Định nghĩa và cách sử dụng

ng-class Hướng dẫn này được sử dụng để gán động một hoặc nhiều lớp CSS vào phần tử HTML.

ng-class Giá trị của hướng dẫn có thể là chuỗi, đối tượng hoặc mảng.

Nếu nó là chuỗi, nó nên chứa một hoặc nhiều tên lớp được phân tách bởi khoảng trống.

Là một đối tượng, nó nên chứa các cặp khóa giá trị, trong đó khóa là tên lớp mà bạn muốn thêm, và giá trị là giá trị boolean. Chỉ khi giá trị được đặt thành true thì mới thêm lớp đó.

Là một mảng, nó có thể là sự kết hợp của cả hai. Mỗi phần tử của mảng có thể là chuỗi hoặc đối tượng được mô tả ở trên.

Mô hình

Thay đổi lớp của phần tử <div>:

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>
<div ng-class="home">
    <h1>Chào mừng về nhà!</h1>
    <p>Tôi thích nó!</p>
</div>

Thử ngay

Cú pháp

<element ng-class="biểu thức</element>

Tất cả các yếu tố HTML đều hỗ trợ.

Tham số