2016-05-04 9 views
4

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

サンプル(フェッチ-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」という簡単なメッセージを印刷したいと考えています。ありがとうございました。

+0

あなたが入力の値がすでにJSONに存在するかどうかを確認し、それに応じて入力検証を設定するためのディレクティブを作成することができます。フォームが無効な場合は、単にボタンを無効にしてください – yBrodsky

答えて

2

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を使ってリストを検索しました。カスタムメソッドも使用できます。

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

+0

ありがとうございます。私は自分の投稿を編集して自分のデータをどのように取得したかについての詳細情報を追加します。 – Ariana

+0

l_usernames配列を取得したら、上記のコードが機能するはずです。 –

+0

ありがとうございました:D完璧に動作しています。 – Ariana

1

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

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

ありがとうございます。それは私の問題の良い解決策だと思われますが、私は既に別の問題を実装しています。乾杯! – Ariana

関連する問題