使用 ng-disabled (AngularJS) 搜索 JSON 对象

Question

我的 Web 应用程序的一个功能是可以通过表单添加新用户（用户名 + 密码）。因此，我在控制器 (UsersController) 中定义了一个 JSON 对象 (l_usernames)，其中所有用户名都已由用户选择，以避免重复用户名（这是唯一键）。

我的数据示例 (fetched-data.json) - 对象“用户名”的格式 (l_usernames)：

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

有一个添加新用户的表单示例（add-user.html）：

<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>

我的控制器示例 (userscontroller.js)：

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-disabled（通过禁用“保存”按钮），如何不允许插入新用户。如果发生这种情况，我还想打印一条简单的消息 - “用户名已选择”。谢谢。

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