Javascript 为什么AngularJS没有'；使用ng模型时，不要在文本框上设置长度属性_Javascript_Angularjs

Javascript 为什么AngularJS没有'；使用ng模型时，不要在文本框上设置长度属性

javascript angularjs

Javascript 为什么AngularJS没有'；使用ng模型时，不要在文本框上设置长度属性,javascript,angularjs,Javascript,Angularjs,我注意到，当使用ng模型时，文本框的长度属性没有设置为0 看看这个： <body ng-controller="AppCtrl"> <input ng-model="searchFilter" type="text"> <div ng-show="searchFilter.length == 2"> <p>Textbox length : 2</p> </div> <d

我注意到，当使用ng模型时，文本框的长度属性没有设置为0

看看这个：

<body ng-controller="AppCtrl">
    <input ng-model="searchFilter" type="text">

    <div ng-show="searchFilter.length == 2">
        <p>Textbox length : 2</p>
    </div>
    <div ng-show="searchFilter.length == 1">
        <p>Textbox length : 1</p>
    </div>
    <div ng-show="searchFilter.length == 0">
        <p>Textbox length : 0</p>
    </div>
</body>


文本框长度：2
文本框长度：1
文本框长度：0

我知道文本文本框长度：0将在加载页面时显示，但事实并非如此。我目前正在学习AngularJS，但我不明白。这背后有什么原因吗？

您需要为此初始化设置范围变量：

添加到控制器：

$scope.searchFilter = '';

如果不启动它，您的模型将无法在您的条件下使用任何东西，变量未定义，所有条件都给出错误答案。

是，应显示

文本框长度：0

。但在你的例子中，它没有显示出来，因为

您没有在控制器内初始化范围变量

searchFilter

，而是在

文本框中声明它
区别在于
案例1
在控制器内创建范围变量
在这里，当您加载页面时，有一个称为searchFilter
的范围变量，因为您在控制器内初始化。因此searchFilter.length==0
在页面加载中是true

案例2
不在控制器内初始化范围变量，而是在文本框中定义它
在这种情况下，作用域中没有名为searchFilter
的作用域变量，因为您在textbox
中指定了变量，因此在更改textbox值之前，作用域中没有名为searchFilter
的作用域变量searchFilter
变量在您第一次更改文本框后创建。因此，页面加载时searchFilter.length==0
为false
，因为页面加载时没有searchFilter

以下是
如果初始化变量（例如，初始化为空字符串），则变量不再是未定义的。此外，它将成为一个字符串，该字符串标准带有.length
属性.length
在空对象上不表示任何内容
顺便说一句，您可以简化HTML。您不必显示/隐藏一堆不同的消息，只需修改消息以直接绑定到您的searchFilter

<body ng-controller="AppCtrl">
    <input ng-model="searchFilter" type="text">
    <p>Textbox length : {{searchFilter.length}}</p>
</body>


文本框长度：{{searchFilter.length}
如果不将值初始化为空字符串，则该值只是未定义的，没有长度属性，因此不等于0、1或2