如何在AngularJS模板中有條件地顯示跨度？

我有以下對象名單：如何在AngularJS模板中有條件地顯示跨度？

[ 
    { "name" : "foo", "description" : "description of foo..." }, 
    { "name" : "bar", "description" : "description of bar..." }, 
    { "name" : "baz" }, 
    ... 
]

所有的對象都有一個name，但也有一些相關的description，其餘的則沒有。

我使用與連接到一個預輸入的input字段下面的模板，以顯示每個匹配的對象：

<script type="text/ng-template" id="my-template.html"> 
    <a style="text-align: left;"> 
     <span style="font-size: 18px; display:block;">{{match.model.name}}</span> 
     <span ng-show="typeof({{match.model.description}}) !== 'undefined'">{{match.model.description}}</span> 
    </a> 
</script>

我想模板來顯示description只有當它的值被定義，但我的使用的ng-show返回解析錯誤。

只有當此對象鍵（及其值）可用時，我應該如何使用ng-show或其他指令來渲染description？

來源

2016-03-03 Alex Reynolds

<script type="text/ng-template" id="my-template.html"> 
    <a style="text-align: left;"> 
     <span style="font-size: 18px; display:block;">{{match.model.name}}</span> 
     <span ng-show="match.model.description">{{match.model.description}}</span> 
    </a> 
</script>

來源

2016-03-03 21:22:49

感謝您的回答;這對我來說是正確的。 –

你只應檢查變量值，這就足夠了

<span ng-if="match.model.description">{{match.model.description}}</span>

來源

2016-03-03 21:21:52

感謝您的回答。 'ng-if'指令對我來說不起作用，雖然'ng-show'確實如此。我正在使用AngularJS 1.4.7。 –

@AlexReynolds'ng-if'也應該可以工作......'ng-if' /'ng-show'兩者都是相似的，但不同的是，'ng-show'根據表達式應用'display：none' css，＆'ng -if'會根據表達式值添加刪除該元素。 –

只要使用它，而typeof - 不要使用大括號，如ng-show已經是相對於你的範圍。在JavaScript中，if(undefined)具有相同的結果爲if(false)（見Undefined variables, value == false versus !value）

<script type="text/ng-template" id="my-template.html"> 
    <a style="text-align: left;"> 
    <span style="font-size: 18px; display:block;">{{match.model.name}}</span> 
    <span ng-show="match.model.description">{{match.model.description}} </span> 
    </a> 
</script>

來源

2016-03-03 21:22:23 JanS

使用ng-if="match.model.description"代替ng-show。 ngIf與ngShow的不同之處在於，如果完全刪除並重新創建DOM中的元素，而不是通過display css屬性更改其可見性。

來源

2016-03-03 21:23:51 cheralathan

如何在AngularJS模板中有條件地顯示跨度？

回答

相關問題