我可以在AngularJS模板中清理這些ng-if語句嗎？

我有以下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>

我可以簡化或清理或合併這三種ng-if語句？

condition1,condition2和condition3是相互排斥的。但是，它們不是基於單個表達式，因此switch語句不起作用？我可以使用if-then-else構造嗎？

來源

2016-09-26 Saqib Ali

取決於什麼條件是'ng-switch'可能適合你https://docs.angularjs.org/api/ng/directive/ngSwitch – rob

迴應你的評論我修改了這個問題。 –

ng-switch將完成這項工作。你只需要根據你的邏輯在你的控制器中定義一個屬性，並在你的視圖中使用它。通過這些方式，您可以用您的控制器或服務中的邏輯代替您的視圖中的邏輯 – Alberto

如果它們是互斥的，那麼是的，你可以簡化條件2和條件3，並且只使用一個條件（因爲輸出是相同的）。

編輯：基於您的更新，你可以簡化的邏輯是這樣的：

<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>

或者你也可以使用納克開關。

來源

2016-09-26 16:46:50

對不起，我的原始問題中有一個錯誤，我根據您的回答進行了更正。第二和第三個分支的輸出略有不同。 –

@SaqibAli：更新。 –

我的沮喪是似乎沒有'ng-else-if'而沒有'ng-else'。爲什麼地球不是？ –

我可以在AngularJS模板中清理這些ng-if語句嗎？

回答

相關問題