Thực hiện một tình trạng render với AngularJS

Question

tôi biết làm thế nào để thực hiện một xem tình trạng AngularJS, mà sẽ hiển thị hoặc yếu tố ẩn dom phụ thuộc vào điều kiện:

<div ng-show="{{isTrue}}">Some content</div> 

nhưng làm thế nào để tạo ra một làm điều kiện xác định liệu có hiển thị hay không là div?

Answer 1

Cập nhật cho angularjs 1.1.5 trở lên người sử dụng (không được hỗ trợ trong 1.0.7):

liên quan cam kết: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

góc bây giờ có một chỉ vẽ có điều kiện: ngIf .

Cách sử dụng:

<div ng-if="conditional_expression"></div> 

Lưu ý rằng khi một phần tử được lấy ra sử dụng ngIf phạm vi của nó bị phá hủy và một phạm vi mới được tạo ra khi nguyên tố này được phục hồi

Documentation: directive-ngIf

Đối với người dùng cũ của angularjs:

ngShow chỉ thị có điều kiện ẩn/hiển thị phần tử. Điều này sẽ được thay đổi trong một trong các bản phát hành ổn định mới, hiện có sẵn trong bản phát hành unstable như với 1.1.5.

Nếu bạn muốn thêm/xóa có điều kiện trên DOM, sử dụng có thể sử dụng ngSwitch.

<div ng-switch="showMe"> 
    <div ng-switch-when="true">Hello!</div> 
</div> 

Thực ra, chỉ thị này đã được tạo để xử lý các trường hợp trên 1, nhưng bạn cũng có thể sử dụng nó theo cách đó. Xem câu trả lời this để biết các ví dụ về cách sử dụng phức tạp hơn.

Answer 2

Có ít nhất hai cách để làm điều đó:

• làm cho một số phần sử dụng khuôn mẫu
• sử dụng biểu hiện đơn giản với chức năng vẽ có điều kiện (xem this fiddle và mô tả dưới đây)

Đối với đơn giản thành phần, tôi khuyên bạn nên gắn bó với hàm render. Rất dễ hiểu.

$scope.render = function(condition) {   
    return condition ? "This is rendered when condition == TRUE" : "This is rendered when condition == FALSE"; 
}; 

và đơn giản bao gồm nó trong HTML của bạn, như vậy:

{{render(true)}} 

Bạn cũng có thể quấn này với chỉ thị góc, mà sẽ cung cấp cho bạn đánh dấu rất tốt đẹp và khả năng không giới hạn!

Answer 3

cách khuyến nghị là sử dụng ng-bao gồm

Ví dụ: http://jsfiddle.net/api/post/library/pure/

<div ng-app=""> 
    <div ng-controller="Ctrl"> 
    <select ng-model="template" ng-options="t.name for t in templates"> 
    <option value="">(blank)</option> 
    </select> 
    url of the template: <tt>{{template.url}}</tt> 
    <hr/> 
    <div ng-include src="template.url"></div> 
    </div> 


    <!-- template1.html --> 
    <script type="text/ng-template" id="template1.html"> 
    Content of template1.html 
    </script> 

    <!-- template2.html --> 
    <script type="text/ng-template" id="template2.html"> 
    Content of template2.html 
    </script> 
</div> 

Answer 4

Nhìn vào angular-uiif chỉ thị. Tôi tin rằng điều này sẽ phục vụ bạn tốt.