javascript - 禁用 AngularJS 表单中选择标记内的选项
问题描述
我有一个表格,有两个选择。我想实现,如果在第一个选择中选择了“任何”选项,则禁用另一个选择中的一个选项。
因此,在这里,如果选择了“Any”(vm.scriptTypes 的一部分,vm 是控制器):
<select name="scriptType" id="scriptType" class="form-control" required
ng-model="vm.rule.scriptType"
ng-options="option.name as option.name for option in vm.scriptTypes">
</select>
从 vm.actions (ng-options) 中禁用“组合禁令”(“组合禁令”是 vm.actions 的一部分,它是一个对象,具有“类型”和“命令”键)
<select name="action" id="action" class="form-control" required
ng-model="vm.rule.action"
ng-change="vm.rule.action "
ng-options="(option.type + ' ' + option.command) as (option.type + ' ' + option.command) for option in vm.actions">
</select>
提前感谢您提供的任何帮助。
解决方案
您可以disable when
在 ngOptions https://docs.angularjs.org/api/ng/directive/ngOptions中使用该参数
<div ng-app="TestApp" ng-controller="TestController">
<select name="scriptType" id="scriptType" class="form-control" required
ng-model="rule.scriptType"
ng-options="option.name as option.name for option in scriptTypes">
</select>
<select name="action" id="action" class="form-control" required
ng-model="rule.action"
ng-change="rule.action "
ng-options="(option.type + ' ' + option.command) as (option.type + ' ' + option.command) disable when (rule.scriptType == 'Any' && option.type == 'Combination ban') for option in actions">
</select>
</div>
js:
var app = angular.module('TestApp', []);
app.controller('TestController', function($scope) {
$scope.scriptTypes = [{
name: 'Any'
},
{
name: 'ron'
},
{
name: 'ron2'
}];
$scope.actions = [{
type: 'type1',
command: 'cmd1',
},
{
type: 'type2',
command: 'cmd2',
},
{
type: 'Combination ban',
command: 'Combination ban',
}];
});
推荐阅读
- typescript - 为什么解包和重新包装一个类型数组不能让我回到原始类型?
- python - mariaDB:列计数与第 1 行的值计数不匹配
- ruby - 如何从数据文件循环显示内容?
- ios - iOS Core Graphic,如何计算 CGAffineTransform(scaleX offset?
- php - 计算数据表/数据库中某些输入的出现次数
- websitepanel - WebsitePanel 门户崩溃
- python-3.x - TypeError:+ 的不支持的操作数类型:数学中的“float”和“str”
- c++ - 使用 WindowSetup 类变量时出错
- javascript - 将带有格式/样式的 HTML 表格标记复制到剪贴板
- json - 如何使用计数器 +1 更改 json 文件中的特定行