48

条件に応じてdom要素を表示または非表示にするビュー条件をAngularJSで作成する方法を知っています。

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

しかし、div をレンダリングするかどうかを決定するレンダリング条件を作成するにはどうすればよいでしょうか?

4

4 に答える 4

73

angularjs 1.1.5 以降のユーザー向けの更新 (1.0.7 ではサポートされていません):

関連コミット: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

Angular に条件付きレンダリング ディレクティブが追加されました: ngIf.

使用法：

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

要素が ngIf を使用して削除されると、そのスコープが破棄され、要素が復元されると新しいスコープが作成されることに注意してください

ドキュメント: ディレクティブ-ngIf

従来の angularjs ユーザーの場合:

ngShowディレクティブは、要素を条件付きで非表示/表示します。これは、新しい安定版リリースの 1 つで変更される予定unstableです1.1.5。

条件付きで DOM のアイテムを追加/削除したい場合は、can を使用しますngSwitch。

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

実際には、このディレクティブは複数のケースを処理するために作成されていますが、そのように使用することもできます。より洗練された使用例については、この回答を参照してください。

于 2013-01-23T09:31:06.650 に答える
2

推奨される方法は、ng-includeを使用することです

例： 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>
于 2013-01-23T09:43:58.107 に答える
1

これを行うには、少なくとも2つの方法があります。

  • テンプレートを使用して部分的にレンダリングする
  • 条件付きレンダリング関数で単純な式を使用します（このフィドルと以下の説明を参照してください）

単純なコンポーネントの場合は、レンダリング機能に固執することをお勧めします。とてもわかりやすいです。

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

次のように、HTMLに含めるだけです。

{{render(true)}}

これを角度ディレクティブでラップすることもできます。これにより、非常に優れたマークアップと無制限の可能性が得られます。

于 2013-01-23T08:43:37.070 に答える
0

angular-ui ifディレクティブを見てください。これはあなたの目的に役立つと思います。

于 2013-01-23T11:33:35.520 に答える