Question

我的角色代码中有这个：

$scope.Disable = false;

$scope.SetDisable = function (Number) {
    if (Number.length < 4) {
        return false;
    }
    else {
        return true;
    }


};

$scope.$watch("Admin.UserName", function () {
    $scope.Disable = $scope.SetDisable($scope.Admin.UserName.length);
});

我认为这段代码：

<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="Disable" />

请注意，我将$scipe.Disable的默认值更改为true并将我的Angular脚本中的其他代码行置为注释，该按钮仍处于启用状态。

如果我将视图中的代码更改为：

<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="true" />

（NG-禁用= “的真”）

该按钮已被禁用。

我做错了什么？

Answer 1

使用 ng-change 代替$ watch例如

$scope.myChange = function (nu) {

  if (nu.length < 4) {
      $scope.Disable = false;
  }
  else {
      $scope.Disable = true;
  }
};

看到这个链接： https://plnkr.co/edit/m5TUzC35gg8EuApVHcO0?p=preview

Answer 2

这可能是由Angular scope inheritance feature引起的，您可以通过两种方法克服这个问题：

使用controller as语法：

angular.controller('formController', function(){
    this.Disabled = false;
})

<div ng-controller="formController as ctrl">
    <input ng-disabled="ctrl.Disabled">
</div>

使用引用变量而不是原始变量

$scope.Disabled = { value: false }

<input ng-disabled="Disabled.value">

Answer 3

问题是在$ watch（）函数中，在调用函数SetDisable（）时传递字符串的长度而不是字符串，在此函数中，在if条件中再次使用长度。

<强> HTML ：

<html ng-app="app">
  <head>
  </head>
  <body ng-controller="mainController">
    <div>
      <label>UserName:</label>
      <input type="text" ng-model="UserName" placeholder="Enter a name here">
      <hr>
      <input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="Disable" />
    </div>
  </body>
</html>

<强> JS ：

angular
  .module('app', [])
  .controller('mainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope) {
  $scope.Disable = false;

  var SetDisable = function (name) {
      if (name.length < 4) {
          return false;
      } else {
          return true;
      }
  }  

  $scope.$watch('UserName', function() {
    $scope.Disable = SetDisable($scope.UserName);
  })

}

我做了一个工作的例子： http://codepen.io/anon/pen/GomYGq?editors=101

尝试使用Angular的ng-disable禁用按钮

3 个答案: