如何渲染angularjs的有条件内容

How to render angularjs content conditional?

本文关键字：有条件 何渲染 angularjs      更新时间：2023-09-26

我想在前端呈现一些ui内容，基于控制器变量的boolean状态。

控制器:

$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]'
''

第二个语句不知何故没有呈现。为什么?

[]是没有字符串键的数组字面值。
=赋值给一个变量，它不用于关联键和值。

您需要一个对象字面量，它看起来像这样:

$scope.test = {
    myvar: true
};

你还弄乱了指令中的语法:

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

{{}}在基本所有指令中都是不必要的;指令属性的内容在指令内部被解析，它不需要被绑定。{{}}几乎只用于"回显"数据。

在JavaScript中，对象是在花括号的帮助下创建的，像这样:

$scope.test = {
    myvar: true
};

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

ng-if="test.myvar"

方括号它是一个数组。例:['Charles'， 'Jay'， 'Jonh']花括号，它是一个对象。示例:{name: 'Charles'， phone: '91332323'}

在一个对象中，你可以用"。"符号访问变量。

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

不需要为ng-if加上大括号。只需使用ng-if="test "。并使用

$scope.test = {
myvar: true  };
相关文章：