Question

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

是否可以在此处使用AngularJs数据绑定功能，无需手动添加按键或键入事件，我们就可以获得所需的结果。

Answer 1

首先，将输入元素与控制器的范围变量绑定。

<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;
      }
    });

Answer 2

您可以使用过滤器。

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

Answer 3

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

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

然后，在HTML中为该ng-model值使用AngularJS数据绑定，例如：

{{ insert variable name here }}

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

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

并且记得要添加一个＆＃34; ng-app＆＃34;在元素之前它实际上是有效的。如果您创建一个带有名称的模块，请使用ng-app =＆＃34;模块名称＆＃34;在html或body标签中，因为带有ng-app的标签需要在其中包含输入才能使绑定工作。

在Hello World案例中，＆＃34; Hello＆＃34;将是一个固定的字符串，但＆＃34;名称＆＃34;将使用输入字段的值实时更改。

对于完整的HTML示例...

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

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

<input ng-class="{invalid: name !== arrayObject} {valid: name === arrayObject}" ng-model="name">

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

3 个答案: