在禁用ng的情况下搜索JSON对象(AngularJS）

Searching through JSON Object with ng-disabled (AngularJS)

本文关键字：对象 JSON AngularJS 搜索 情况下 ng      更新时间：2023-09-26

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

我的数据示例（提取的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>

我的控制器示例（users-controller.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（通过禁用"保存"按钮），那么如何不允许插入新用户。如果出现这种情况，我还想打印一条简单的消息——"用户名已经选择"。非常感谢。

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

看看这个小提琴这里

控制器

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

为了获得更好的性能，我添加了警告信息并取消了模型。

我会制定一个验证指令。

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;
            });
        }
    };
})
相关文章：