2016-09-26 4 views
0

私は次のAngularJSテンプレートを持っています。AngularJSテンプレートでng-ifステートメントをクリーンアップすることはできますか?

<tr> 
    <td ng-if="condition1"> 
     Hello World 
    </td> 
    <td ng-if="condition2"> 
     A <a ui-sref="mystate1({a: 1, b: 2})"></a> 
    </td> 
    <td ng-if="condition3"> 
     B <a ui-sref="mystate1({a: 1, b: 2})"></a> 
    </td> 
    </tr> 

私は簡素化やクリーンアップ、またはこれら3つのng-ifのステートメントを組み合わせことはできますか?

condition1,condition2およびcondition3は互いに排他的である。しかし、それらは単一の式に基づいていないので、switch文は機能しません。 if-then-else構造を使用できますか?

+2

ng-switchが動作する条件によって異なりますhttps://docs.angularjs.org/api/ng/directive/ngSwitch – rob

+0

あなたのご意見に答えて私は質問を修正しました。 –

+0

ng-switchが作業を行います。ロジックに基づいてコントローラ内にプロパティを定義し、それをビューで使用するだけで済みます。これらの方法で、ビューのロジックをコントローラまたはサービスのロジックに置き換えます。 – Alberto

答えて

1

これらが相互に排他的である場合、yesとすると、condition2とcondition3を単純化し、両方に1つの条件を使用することができます(出力が同じであるため)。

EDIT:

<tr> 
<td ng-if="condition1"> 
    Hello World 
</td> 
<td ng-if="condition2 || condition3"> 
    {{condition2 ? 'A' : 'B'}} 
    <a ui-sref="mystate1({a: 1, b: 2})"></a> 
</td> 

それとも、また、NG-スイッチを使用することができます。あなたの更新に基づき、次のようなロジックを簡素化することができます。

+0

申し訳ありませんが、あなたの回答に基づいて修正したオリジナルの質問に間違いがありました。第2および第3ブランチの出力はわずかに異なる。 –

+0

@SaqibAli:更新されました。 –

+0

私の不満は、「ng-else-if」と「ng-else」がないようです。なぜ地球上ではない? –

関連する問題