简体   繁体   中英

How to check in real time if a input field matches another variable with angular.js

I have a ng-repeat that loops through an object and displays a list of strings and input fields, example below. I need to set up a real-time verification for these input fields. The input field should be equal to the barcode string. If a user types in a string that IS NOT equal to the barcode string than angular should prompt the user that it must equal the barcode string and clear the input field. Is this possible with angular? I've accomplished similar tasks with jQuery.. could I combine some jQuery and Angular to achieve this verification? I'm new with angular.js so any help is greatly appreciated.

HTML:

<div ng-repeat="(index, val) in barcodes.barcodes track by $index">
  <div class="form-group row" ng-show="barcodes.barcodes[index]">
    <label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.adaptors[$index] }} </label>
    <label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.barcodes[index] }} </label>
    <div class="col-sm-6">
      <input type="email" class="form-control" placeholder="Barcode">
    </div>
  </div>
</div>

Example bars Object:

var bars = {
  "adaptors": ["506-704", "505-703", "503-702", "508-701", "507-705", "502-706", "504-707", "501-708"],
  "barcodes": ["11-11-1111","11-11-2222","11-11-3333","11-11-4444","X","X","X","X"];
}

在此处输入图片说明

if you want real time...watcher may be what you're looking for. But watcher is not efficient.

What would be best is to use the ng-change directive. This way, every time a user types, it will trigger the function passed to the ng-change directive. This can allow you to handle logic inside a function and react however you want.

https://docs.angularjs.org/api/ng/directive/ngChange

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM