ng-disabled（AngularJS）でJSONオブジェクトを検索する

Question

私のWebアプリケーションの機能の1つは、フォームを使用して新しいユーザー（username + password）を追加することです。これにより、コントローラ（UsersController）に1つのJSONオブジェクト（l_usernames）が定義されており、ユーザー名の繰り返しを避けるために、すべてのユーザー名がユーザーによって選択されています（ユニークなキーです）。私のデータの

サンプル（フェッチ-data.json） - オブジェクトの "ユーザ名"（l_usernames）のフォーマット：

[{"0":"default","USERNAME":"default"},{"0":"user1","USERNAME":"user1"},{"0":"user2","USERNAME":"user2"},{"0":"user3","USERNAME":"user3"}] 

新しいユーザーを追加するためのフォームのサンプルがあります（アドオンuser.html）：私のコントローラ（userscontroller.js）の

<div class="row" ng-controller="UsersController"> 
    <div class="col-md-12"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Add New User</h3> 
     </div> 
     <div class="panel-body"> 
     <form class="form-horizontal" role="form"> 
      <div class="form-group"> 
      <label for="inputUserUsername" class="col-sm-2 control-label"><i class="icon fa fa-user"></i> USERNAME</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="inputUserUsername" placeholder="Username" ng-model="user_username"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="inputUserPassword" class="col-sm-2 control-label"><i class="icon fa fa-key"></i> PASSWORD</label> 
      <div class="col-sm-10"> 
       <input type="password" class="form-control" id="inputUserPassword" placeholder="Password" ng-model="user_password"> 
      </div> 
      </div> 
     </form> 
     </div> 
    </div> 
    <form class="form-inline"> 
     <div class="span7 text-center"> 
     <button type="submit" class="btn btn-success" ng-click="addUser()" ng-disabled="(!user_username || !user_password)">Save</button>  
     </div> 
    </form> 
    </div> 
</div> 

サンプル：

var app = angular.module('myApp'); 

app.controller('UsersController', ['$scope', 'services', function($scope, services) {  

services.getData().then(function(data){ 
    $scope.l_usernames = data.data; 
}); 
}]) 

.factory('services', ['$http', function($http){ 
    var serviceBase = 'services/' 
    var object = {}; 
    object.getData = function(){ 
    return $http.get('fetched-data.json'); 
    }; 
    return object; 
}]); 

私はユーザ名がすでに選択されている場合は、新規ユーザーの挿入を許可しないことが可能である方法を知りたい - JSONオブジェクトl_usernamesを検索 - NG-無効（「保存」ボタンを無効にすることによって）で。また、このような状況が発生した場合、「Username already selected」という簡単なメッセージを印刷したいと考えています。ありがとうございました。

Answer 1

user_usernameスコープ変数にウォッチを追加します。 JSONオブジェクトを通じて検索を変更するたびに、lodashまたはunderscorejsを使用してl_usernamesを検索し、ユーザー名がすでに存在するかどうかを確認できます。存在する場合は、スコープ内の変数をfalseに設定します。保存ボタンのng-disabledをこの変数にバインドします。より良いパフォーマンスを得るには、user_usernameにdebounceを使用してください。

このフィドルhere

コントローラ

function UsersController($scope) { 
    $scope.name = 'Superhero'; 
    $scope.l_username = [{"0":"default","USERNAME":"default"},{"0":"user1","USERNAME":"user1"},{"0":"user2","USERNAME":"user2"},{"0":"user3","USERNAME":"user3"}]; 
    $scope.allowSave = true; 
    $scope.$watch('user_username', function(value) { 
     if (_.findWhere($scope.l_username, {"USERNAME": value}) !== undefined) 
     $scope.allowSave = false; 
     else 
     $scope.allowSave = true; 
    }) 
} 

HTML

<button type="submit" class="btn btn-success" ng-click="addUser()" ng-disabled="!allowSave">Save</button>  

入力されたユーザ名が配列に発見されたときはいつでも、allowSave変数を見てみましょう「保存」ボタンが無効になります。

注：私はunderscore.jsを使ってリストを検索しました。カスタムメソッドも使用できます。

私は警告メッセージを追加し、より良いパフォーマンスのためにモデルをデバックしました。

Answer 2

私は検証指令を作成します。

HTML：あなたのモデルが夢中になると（それが検証を遅らせる）は常に更新されないように

<input username-exists type="text" ng-model="userName" ng-model-options="{updateOn: 'default blur', debounce: { 'default': 700, 'blur': 0 }}" /> 
<div ng-if="myFormName.$error.usernameExists">Username exists!</div> 

<button type="button" ng-disabled="myFormName.$invalid"> 

ng-model-optionsです。

Javascriptを：

app.directive('usernameExists', function() { 
    return { 
     restrict: 'A', //match attributes only 
     require: 'ngModel', 
     scope: { 
      l_usernames: '=' 
     }, 
     link: function(scope, elem, attrs, ctrl) { 
      ctrl.$parsers.unshift(function(viewValue) { 
       //first, assume the model is valid until proven otherwise 
       ctrl.$setValidity('usernameExists', true); 

       if(viewValue.length > 0 && !ctrl.$error.usernameExists) { 

        for(var i = 0; i < scope.l_usernames.length; ++i) { 
         if(scope.l_usernames[i].USERNAME === viewValue) { 
          //username exists, so set valididty to false 
          //the form is not valid 
          ctrl.$setValidity('usernameExists', false); 
          break; //found match 
         } 
        } 
       } 

       return viewValue; 
      }); 
     } 
    }; 
})