Question

我有以下对象列表：

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

所有对象都有name，但有些对象有description，其余对象没有。{/ p>

我使用以下模板，其中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？

Answer 1

您应该只检查变量值，

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

Answer 2

不使用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>

Answer 3

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

Answer 4

使用ng-if="match.model.description"代替ng-show。 ngIf与ngShow的不同之处在于，ngIf完全删除并重新创建DOM中的元素，而不是通过display css属性更改其可见性。

如何在AngularJS模板中有条件地显示span？

4 个答案: