Enable/Disable 使用 AngularJS 在下拉列表中选择值的按钮
Enable/Disable button by selected value in drop down list using AngularJS
我有一个名为测试的按钮和一个包含三个值的下拉菜单。
如何根据下拉菜单中选择的值启用/禁用测试按钮。
例如。如果选择 "Not Ready" ,按钮应该禁用
如果选择就绪或注意,按钮应启用
<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>
您需要 Angular 应用程序和控制器。从那里您可以将模型绑定到您的 select,然后在按钮上使用带有 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>
如果验证值为数字则使用此方法。
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-sm-4 col-md-4 col-lg-4">User Type</label>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<select class="form-control height_30" ng-model="data1.user_type " ng-options="cust.id as cust.typename for cust in usertype"></select>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-sm-4 col-md-4 col-lg-4">Password</label>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="text" class="form-control" ng-model="data1.user_passwd">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-sm-4 col-md-4 col-lg-4">Customer</label>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<select ng-disabled="data1.user_type === 1 || data1.user_type === 2" class="form-control height_30" ng-model="data1.customer_id" ng-options="cust.customer_id as cust.customer_name for cust in customers"></select>
</div>
</div>
</div>
</div>
<select ng-model="item" ng-options="a.name for a in data">
<option value="">
select
</option></select>
<button class="btnS btn-success ctrl-btn" ng-click="save()" ng-disabled="!item"> Submit</button>
我有一个名为测试的按钮和一个包含三个值的下拉菜单。 如何根据下拉菜单中选择的值启用/禁用测试按钮。 例如。如果选择 "Not Ready" ,按钮应该禁用 如果选择就绪或注意,按钮应启用
<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>
您需要 Angular 应用程序和控制器。从那里您可以将模型绑定到您的 select,然后在按钮上使用带有 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>
如果验证值为数字则使用此方法。
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-sm-4 col-md-4 col-lg-4">User Type</label>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<select class="form-control height_30" ng-model="data1.user_type " ng-options="cust.id as cust.typename for cust in usertype"></select>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-sm-4 col-md-4 col-lg-4">Password</label>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="text" class="form-control" ng-model="data1.user_passwd">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-sm-4 col-md-4 col-lg-4">Customer</label>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<select ng-disabled="data1.user_type === 1 || data1.user_type === 2" class="form-control height_30" ng-model="data1.customer_id" ng-options="cust.customer_id as cust.customer_name for cust in customers"></select>
</div>
</div>
</div>
</div>
<select ng-model="item" ng-options="a.name for a in data">
<option value="">
select
</option></select>
<button class="btnS btn-success ctrl-btn" ng-click="save()" ng-disabled="!item"> Submit</button>