Zrób stan renderowania z angularjs

Question

wiem jak zrobić widok warunek w angularjs, który będzie wyświetlany lub elementu ukryj dom od warunku:

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

ale jak mogę utworzyć renderowanie warunek, który określa, czy renderować div, czy nie?

Answer 1

Aktualizacja angularjs 1.1.5 i powyżej użytkowników (nie obsługiwane w 1.0.7):

Związany popełnić: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

kątowa teraz warunkowa dyrektywa renderowania: ngIf .

Zastosowanie:

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

Zauważ, że gdy element jest usuwany za pomocą ngIf jego zakres jest zniszczona i nowy zakres jest tworzony, gdy element jest przywracany

Documentation: directive-ngIf

Dla starszych użytkowników angularjs:

ngShow Dyrektywa warunkowo ukrywa/pokazuje element. Zostanie to zmienione w jednej z nowych stabilnych wersji, teraz jest dostępne w wersji unstable, podobnie jak w przypadku 1.1.5.

Jeśli chcesz warunkowo dodawać/usuwać elementy w DOM, użyj można użyć ngSwitch.

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

W rzeczywistości niniejsza dyrektywa została stworzona do obsługi spraw dla więcej niż 1, ale można z niej korzystać również w ten sposób. Zobacz this odpowiedź na przykłady bardziej wyrafinowanych zastosowań.

Answer 2

Istnieją co najmniej dwa sposoby że:

• czynią niektóre częściowe użyciu szablonów
• użyć prostego wyrażenia z warunkowym funkcja renderowania (patrz this fiddle i opis poniżej)

Dla prosty komponenty, polecam trzymać się funkcji renderowania. Bardzo łatwe do zrozumienia.

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

i po prostu umieścić go w kodzie HTML, tak jak poniżej:

{{render(true)}} 

Można też owinąć to z kątowym dyrektywę, która daje bardzo ładny znaczników i nieograniczone możliwości!

Answer 3

Zalecana sposobem jest użycie ng obejmują

Przykład: 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

Spójrz na angular-uiif dyrektywy. Wierzę, że to dobrze ci służy.