Question

我注意到，当使用ng-model时，文本框的length属性不会设置为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>

JS Bin here

我强调文本文本框长度：0 会在页面加载时出现，但事实并非如此。我目前正在学习AngularJS，但我还没有得到它。这背后有原因吗？

Answer 1

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

添加到控制器：

$scope.searchFilter = '';

如果没有启动它，您的模型将无法在您的条件中使用任何内容，变量未定义且所有conds都给出错误答案。

Answer 2

是的，Textbox length : 0应该是可见的。但在你的例子中它没有显示，因为，

您没有初始化控制器内的范围变量searchFilter，而是在textbox中声明它。

差异是，

案例1 在控制器内创建范围变量

这里当您加载页面时，有一个名为searchFilter的范围变量，因为您在控制器中初始化。因此页面加载中searchFilter.length == 0为true。

案例2 不在控制器内初始化范围变量，而是在文本框中定义它

在这种情况下，范围中没有名为searchFilter的范围变量，因为您在textbox中指定了变量，因此范围内没有名为searchFilter的范围变量，直到您更改文本框值。 searchFilter变量在您第一次更改文本框后立即创建。因此页面加载时searchFilter.length == 0为false，因为页面加载时没有searchFilter。

这是Demo Plunker

Answer 3

如果初始化变量（例如，为空字符串），则不再定义变量。此外，它将成为一个字符串，标配.length属性。 .length对空对象没有任何意义。

顺便说一下，您可以简化HTML。您可以修改邮件以直接绑定到searchFilter，而不是显示/隐藏大量不同的邮件。

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

当使用ng-model时，为什么AngularJS不在文本框上设置length属性

3 个答案: