Plunker

Question

我有一个按钮，需要根据用户是否在html页面中输入值来控制。

我将模型绑定到文本字段并在$ scope上设置了一个禁用变量，该变量在输入字段模型的值上启用/禁用。

这是HTML

<!--This button should be disabled if no value is enterd in both the field-->
  <input type='button' value='click' ng-disabled='disabled'>
  <br>
  <input type="text" ng-model="first">
  <br>
  <input type="text" ng-model='last'>

这是相应的角度控制器。

angular.module('app', []).controller('myController', function($scope) {

  $scope.disabled = !$scope.first || !$scope.last;

})

它第一次运行，但之后不会根据以后的修改显示更改。

根据我的理解，angular使用双向绑定，因此如果我在视图上修改任何内容，它应该反映在控制器上，然后控制器上的任何更改都应该反映在视图上。我在这做错了什么？

PS：我不想使用表格
我想避免文本输入字段上的onChange事件。

请参考plunk http://plnkr.co/edit/L5wkcpNzMMBZxtcitJwk?p=preview

Answer 1

使用ng-disabled='!first || !last'。

以下逻辑似乎有效，至少在你的Plunker中是这样的：

<input type='button' value='click' ng-disabled='!first || !last'>
<br>
<input type="text" ng-model="first">
<br>
<input type="text" ng-model='last'>

确实，范围变量$scope.first和$scope.last是双向绑定到控制器的。这意味着输入框中的任何更改都应自动反映这些变量的状态。但disabled是一个计算数量，在控制器加载时计算一次，但在代码中不再计算。因此，disabled似乎始终为true，即使您已在两个输入框中输入文字后也是如此。

Plunker

Answer 2

您可以通过检测输入中的更改来执行此操作

angular.module('app', []).controller('myController', function($scope) {
  $scope.change = function() {
    $scope.disabled = !$scope.first || !$scope.last;
  }    
})

HTML

 <input type='button' value='click' ng-disabled='disabled'>
  <br>
  <input type="text" ng-change="change()" ng-model="first">
  <br>
  <input type="text" ng-change="change()" ng-model='last'>

<强> DEMO

Answer 3

试试这个

angular.module('app', []).controller('myController', function($scope) {

     $scope.disabled = !$scope.first=="" || !$scope.last == "";

})

Answer 4

使用这个。我希望它有所帮助：

      $scope.disabled=($scope.first==""?true:($scope.last==""?true:false))

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app>
<input type='button' value='click' ng-disabled='first.length==0||last.length==0||first==undefined||last==undefined'>
     <br>
    <input type="text" ng-model="first">
     <br>
      <input type="text" ng-model='last'>
</div>

Answer 6

我已经编辑了这个plunker。请查看它并让我知道。

js code：

angular.module('app',[]).controller('myController', function($scope){

  $scope.disabled = true;

  $scope.func=function() {
   $scope.disabled = true;
    if($scope.first && $scope.last) {
      $scope.disabled=false;
    }
  }

})

HTML code：

<!DOCTYPE html>
<html ng-app='app'>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='myController'>

  <!--This button should be disabled if no value is enterd in both the field-->
  <input type='button' value='click' ng-disabled='disabled'>
  <br>
  <input type="text" ng-model="first" ng-change="func()">
  <br>
  <input type="text" ng-model='last' ng-change="func()">
</body>

</html>

在angular.js中启用控制器的禁用按钮

6 个答案:

Plunker