尝试使用 Angular ng-disabled 禁用按钮答案

【问题标题】：Trying to disable a button using Angular's ng-disable尝试使用 Angular ng-disabled 禁用按钮
【发布时间】：2016-04-14 05:57:47
【问题描述】：

我的角码中有这个：

$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-disabled="true")

按钮被禁用。

我做错了什么？

【问题讨论】：

能否请您也提供一个 plunker sn-p？
$scope.Admin.UserName的长度是多少？
我怀疑您没有指定 ngController 来控制 <input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="Disable" /> 参见 ngController usage

标签： javascript angularjs model-view-controller angularjs-scope

【解决方案1】：

问题在于，在 $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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

这可能是由 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">

【讨论】：