javascript - 在禁用 ng 的情况下搜索 JSON 对象(AngularJS)

Question

我的 Web 应用程序的一个功能是可以通过表单添加新用户(用户名 + 密码)。因此，我在 Controller (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>

我的 Controller 示例 (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(通过禁用“保存”按钮)。如果发生这种情况，我还想打印一条简单的消息——“用户名已选择”。谢谢。

Answer 1

在 user_username 范围变量上添加监视。每当它通过 JSON 对象更改搜索时，您可以使用 lodash 或 underscorejs 搜索 l_usernames 以查看用户名是否已存在。如果存在，则将作用域中的变量设置为 false。将保存按钮的 ng-disabled 绑定(bind)到这个变量。在 user_username 上使用 debounce 以获得更好的性能。

看看这个 fiddle here

Controller

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 来搜索列表。您也可以使用自定义方法。

我添加了警告消息并对模型进行去抖动以获得更好的性能。