使用AngularJS在下拉列表中按选定值启用/禁用按钮

Question

我有一个名为test的按钮和一个带有三个值的下拉菜单.如何根据下拉菜单中选择的值启用 - 禁用"测试"按钮.例如.如果选择"未就绪",则应禁用按钮如果选择就绪或注意,则应启用按钮

<div class="row">
    <div>
    <button id="testBtn" class="btn btn-default" >Test</button>
    </div>
</div>


<div class="row">
<div class="col-md-12">


    <select name="select">
        <option value="value1" selected>Not ready</option> 
        <option value="value2">Ready</option>
        <option value="value3">Attention !!</option>
    </select>


 </div>
</div>

见Plunker

Answer 1

你需要一个Angular应用程序和控制器.从那里,您可以将模型绑定到您的选择,然后在按钮上使用带有ng-disabled指令的表达式,根据框中的值动态启用和禁用它.见下文.select上的ng-model将它绑定到$ scope.currentState,这是我在按钮上的ng-disabled指令中比较我的文字字符串.

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.states = ['Not ready', 'Ready', 'Attention !!'];
  $scope.currentState = 'Not ready';
});

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="row">
    <div>
      <button id="testBtn" class="btn btn-default" ng-disabled="currentState === 'Not ready'">Test</button>
    </div>
  </div>


  <div class="row">
    <div class="col-md-12">


      <select name="select" ng-model="currentState" ng-options="state as state for state in states">
      </select>


    </div>
  </div>
</body>

</html>