禁用“选项”AngularJS元素的“AngularJS”方法是什么？
禁用“选项”AngularJS元素的“AngularJS”方法是什么？
我使用的是AngularJS v1.2.25。
Plunk链接：https://plnkr.co/edit/fS1uKZ
<!-- CODE BEGIN -->
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@2.0.0" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<!-- CODE END -->我正在制作一个“表单”元素，有几个“选择”元素标记和几个“选项”元素标记。
“选项”元素标记在所有四个“select”元素标记中都具有相同的属性。
我要用户对汽车制造商进行排名。当他们选择一个制造商时，我想在所有四个‘选择’元素标签中禁用这个‘选项’元素。
我找到了以下问题/答案，但这是“AngularJS”方式吗？(在选择中禁用选项)
他们使用的是jQuery，我知道AngularJS包含“jQuery Lite”，但这是以“AngularJS”的方式实现的吗？
我在htt9$://docs.angularjs.org/api/ng/directive/ngDisabled站点上找到了这个文档: AngularJS
这是随附的Plunk链接:htt9$：//plnkr.co/编辑/?P=预览
我可以欣赏AngularJS团队提供的示例。我在考虑修改ng-模型和/或ng-禁用。我想避免‘黑客’AngularJS‘核心’文件。
我是否解耦ng模型和/或ng-禁用？
或者，我应该做一个定制的过滤器吗？
我来自jQuery背景，我试图尽可能地坚持AngularJS最佳实践。我想防止过度的“技术债务”。
回答 1
Stack Overflow用户
发布于 2016-07-02 02:47:46
禁用select选项的角度方法是使用ng-disabled="expression" 这个柱塞演示它是如何完成的。
在这种情况下，您可以有4个这样的选择：
<select ng-model="model.selected1">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 1)">{{c.label}}</option>
</select>
<select ng-model="model.selected2">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 2)">{{c.label}}</option>
</select>
<select ng-model="model.selected3">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 3)">{{c.label}}</option>
</select>
<select ng-model="model.selected4">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 4)">{{c.label}}</option>
</select>其中model.options是您的选项列表
var model = $scope.model = {
options: [
{label: 'Volvo', value: 'volvo'},
{label: 'Audi', value: 'audi'},
{label: 'Saab', value: 'saab'},
{label: 'Opel', value: 'opel'},
],
should_disable: should_disable
}该函数should_disable(c，num)在非num的<select>中选择car c时假定为真。
function should_disable(c, selectnum){
var other_selectnums = [1,2,3,4].filter(function(n){
return n != selectnum;
});
var is_selected_somewhere_else = false;
for(var i=0; i<other_selectnums.length; i++){
var otherselectnum = other_selectnums[i];
if(c.value == model['selected'+otherselectnum]){
is_selected_somewhere_else = true;
break;
}
}
return is_selected_somewhere_else;
}https://stackoverflow.com/questions/38154674
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号