Question

如果他/她在前一个文本字段中输入相同的值，我想限制用户创建一个新的文本框和echo错误消息。因此，如果文本字段具有不同的值，则仅创建新文本框。

HTML

<input type="text" ng-model="set.values"/>
<span ng-show="message"> Please enter a different value </span>

ANGULARJS

$scope.set = { values: [] };
$scope.message = false; 

$scope.add = function (){
    $scope.message = false; 
    $scope.set.values.push(''); 
}

Answer 1

您可以使用indexOf和$watch。观察ng-model值以进行更改，并检查数组中是否已存在该值，如果是，则抛出错误。

<强> HTML

<input type="text" ng-model="set.val"/>
<span ng-show="message"> Please enter a different value </span>

<强> JS

$scope.set = {
     values: []
 }; //array that contains previous ng-model values
 $scope.message = false;
 $scope.$watch('set.val', function(val) {
     if (val != undefined) var index = $scope.set.values.indexOf(val);
     if (index > -1) $scope.message = true;
     else {
         $scope.message = false;
         $scope.set.values.push(val);
         //add new input logic
     }
 })

<强>更新

如果您希望在单击添加按钮（我假设您的UI中存在）之后进行检查

$scope.set = {
    values: [] //array that contains previous ng-model values
};
$scope.add = function() {
    var index = $scope.set.values.indexOf($scope.set.val);
    if (index > -1) $scope.message = true;
    else {
        $scope.message = false;
        $scope.set.values.push($scope.set.val);
        //add new input logic
    }
}

Answer 2

如果您希望在用户在上一个文本字段中输入相同值时限制用户创建新文本框和回显错误消息，请参阅此内容。

var app = angular.module("app", []).controller("ctrl", function($scope) {

  $scope.boxes = [{value: ""}];
  $scope.message = false;

  $scope.add = function(val) {
    $scope.message = false;   
    //If total boxes are just one, no need to check, just set the value a nd insert a new box
    if ($scope.boxes.length == 1) {
      $scope.boxes[0].value = val;
      $scope.boxes.push({value: ""});
    } 
    //Total boxes are greater than 1, check last entered value and then add box
    else {
      $scope.checkAndAddBox(val);
    }
  }

  $scope.checkAndAddBox = function(val) {
    // $scope.boxes.length - 2 will give the last box from which value has to be checked
    var lastBoxValue = $scope.boxes[$scope.boxes.length - 2].value;
    //check this value with the new input box value
    if (val != lastBoxValue) {
      //set the box to this value
      $scope.boxes[$scope.boxes.length - 1].value = val;
      //insert a new one 
      $scope.boxes.push({value: ""});
    } 
    //box has the same value, show error message
    else {
      $scope.message = true;
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  <div ng-repeat="box in boxes track by $index">
    <input type="text" ng-model="box.value" ng-readonly="$last ? false : true" />
    <button ng-if="$last" ng-click="add(box.value)">Add</button>
  </div>
  <span ng-show="message"> Please enter a different value </span>
</body>

Answer 3

JS CODE : 

var akashApp = angular.module('akashApp',[]);
          function AvoidDuplicateEntries($scope){
          $scope.books = [
          {bookname: 'Learn Angular'},
          {bookname: 'JS Tutorial'},
          {bookname: 'Node Basics'}
          ];
          var someBook = $scope.books;
          $scope.addBook = function (){
          var newBook = $scope.bookname;
          var oldbooks;
          if(newBook){ // avoiding empty data
          angular.forEach($scope.books, function(eachbook){ //For loop
          if(newBook.toLowerCase() == eachbook.bookname.toLowerCase()){ // this is for checking whether the data is existing or not
          oldmovies = true;
          }
          });
          if(!oldbooks){
          someBook.push({bookname:newBook});
          }
         }
        }
       }

You can try this also.

HTML CODE : 

<div style="padding:20px" ng-app="akashApp" id="ng-app" ng-controller="AvoidDuplicateEntries">
<h1>Basics using AngularJS</h1>
<table class="table table-bordered" style="width:220px;">
<thead>
<tr><td>#</td>
<td>Book Name</td></tr>
</thead>
<tr ng-repeat='Book in Racks'>
<td>{{$index+1}}</td>
<td>{{book.bookname}}</td>
</tr>
</table>
<form ng-submit="addBook();">
<input type="text" ng-model="bookname" size="30" placeholder="Which book you want to read" /><br />
<input type="submit" class="btn btn-primary" value="Add Book">
</form>
</div>

如何在使用Angular JS进入数组之前限制重复的文本字段？

3 个答案: