如何渲染angularjs内容有条件？

Question

我想根据控制器变量的boolean状态在前端渲染一些ui内容。

控制器：

$scope.test = [
    myvar = true
    //some other variables and data
];

HTML：

<div ng-controller"mycontroller">
    <p>'{{test}}'</p>
    <p>'{{test.myvar}}'</p>
    <p ng-if="{{test.myvar}}">show this content</p>
</div>

结果：

'[true]'
''

第二个陈述以某种方式不呈现。为什么呢？

Answer 1

[]是数组的文字，没有字符串键 =分配给变量，它不用于关联键和值。

你想要一个对象文字，如下所示：

$scope.test = {
    myvar: true
};

您还搞砸了指令中的语法：

<p ng-if="test.myvar">show this content</p>

基本上所有指令都不需要

{{}};指令属性的内容在指令内解析，不需要绑定。 {{}}几乎只需要回复＆＃34;数据

Answer 2

在JavaScript中，对象是在花括号的帮助下创建的，如下所示：

$scope.test = {
    myvar: true
};

并且，当使用ng指令时，angular会在没有{{ }}的情况下解析变量，这就是你应该这样做的原因：

ng-if="test.myvar"

Answer 3

方形barckets它是一个数组。例如：['Charles'，'Jay'，'Jonh'] 卷曲括号它是一个对象。例如：{姓名：'查尔斯'，电话：'91332323'}

在对象中，您可以使用“。”访问变量。符号

你正在寻找一个对象，而不是一个数组。

Answer 4

无需使用大括号来表示ng-if ..只需使用ng-if =“test.myvar”并使用

$scope.test = {
myvar: true  };