为什么 AngularJS 在使用 ng-model 时不会在文本框上设置长度属性

Why AngularJS doesn't set the length attribute on a textbox when ng-model is used

本文关键字：设置 属性 文本 AngularJS ng-model 为什么      更新时间：2023-12-10

我注意到，当使用ng-model时，文本框的长度属性没有设置为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 斌在这里

我很难看到文本文本框长度：加载页面时会出现 0，但事实并非如此。我目前正在学习AngularJS，但我不明白。这背后有什么原因吗？

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

添加到控制器：

$scope.searchFilter = '';

如果不启动它，您的模型将在您的条件下没有任何可用的东西，变量是未定义的，并且所有 cond 都给出了错误的答案。

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

您不会在控制器内部searchFilter初始化范围变量，而是在 textbox 中声明它。

不同的是，

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

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

案例2 不要在控制器中初始化作用域变量，而是在文本框中定义它

在这种情况下，作用域中没有称为 searchFilter 的作用域变量，因为您在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>
相关文章：