检查 JavaScript 对象中是否存在值，当您使用 angularjs 在 TextBox 中键入时

Check if a value exists in an JavaScript object as you type in TextBox using angularjs

本文关键字：angularjs TextBox 是否 对象 JavaScript 存在 检查      更新时间：2023-09-26

我有文本框，用户可以在其中输入任何值。当用户输入此值时，在每次键控时，我需要检查该值是否已存在于 $scope.arrayObject 中。我可以通过将 key-kp 事件添加到文本框中然后执行所需的操作来做到这一点。

是否可以在这里利用 AngularJs 数据绑定功能，而无需手动添加键关闭或键启动事件，我们就可以获得所需的结果。

首先，将输入元素与控制器的作用域变量绑定。 

<input ng-model="modalVariable">
<label ng-show="duplicateValue"> Entered Value Already Exists </label>

除了答案之外，完成数据绑定后，将手表添加到控制器内的模态变量中：

    $scope.$watch('modalVariable', function(newValue, oldValue) {
      if ($scope.yourArray.indexOf(modalVariable) !== -1) {
        $scope.duplicateValue = true;
      } else {
        $scope.duplicateValue = false;
      }
    });

您可以使用过滤器。 

<input ng-model="name">
<ul>
    <li ng-repeat="aname in arrayObject | name">{{aname}}</li>
</ul>

是的。作为文本框，您只需添加具有 ng-model 属性的输入，例如：

<input ng-model="insert variable name here">

然后，在 HTML 中对该 ng 模型值使用 AngularJS 数据绑定，例如：

{{ insert variable name here }}

对于 Hello World 示例，它将类似于...

<input ng-model="name" type="text">
Hello {{ name }}

并且请记住在元素之前添加一个"ng-app"，以便它实际工作。如果您使用名称创建模块，请在 html 或 body 标记中使用 ng-app="module name"，因为带有 ng-app 的标记需要包含输入才能使绑定正常工作。

在 Hello World 案例中，"Hello"将是一个固定字符串，但"名称"会随着输入字段的值而实时更改。

有关完整的 HTML 示例...

<html ng-app="myApp">
  <head>
  </head>
  <body ng-controller="HelloWorldController">
    <input type="text" ng-model="name">
    Hello {{ name }}
  </body>
</html>

现在，如果您想检查字段中的条目是否有效，您可以使用 ng 类指令，类似于...

<input ng-class="{invalid: name !== arrayObject} {valid: name === arrayObject}" ng-model="name">
相关文章：