如何禁用<选项>使用 AngularJS ng-options 时选择元素? [英] How to disable a <option> of select element when using AngularJS ng-options?

问题描述

当我们在 AngularJS 中使用 ng-options 填充 options 时，有没有办法禁用 select 元素中的 option ?

像这样:http://www.w3schools.com/tags/att_option_disabled.asp

您可以通过将 ng-disabled 添加到每个 标签来实现，但是如果我们使用 有没有办法做到这一点select 标签中的 ng-options 指令?

解决方案

一种方法是，忘记在 select 元素上使用 ng-options，并且使用 ng-repeat 添加选项，然后您可以在每个 option 上添加 ng-disabled 检查.

http://jsfiddle.net/97LP2/

<form ng-controller="ctrl"><select id="t1" ng-model="curval"><option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option></选择><button ng-click="disabled[curval]=true">disable</button></表单>

用于测试的最小控制器:

angular.module('myapp',[]).controller("ctrl", function($scope){$scope.options=['test1','test2','test3','test4','test5'];$scope.disabled={};})

Is there a way to disable an option in a select element when we populate options with ng-options in AngularJS?

Like this: http://www.w3schools.com/tags/att_option_disabled.asp

You can do it by adding ng-disabled to each <option> tag, but is there a way to do it if we are using the ng-options directive in the select tag?

解决方案

One way to do this is, to forget using ng-options on the select element, and add the options in with ng-repeat, then you can add a ng-disabled check on each option.

http://jsfiddle.net/97LP2/

<div ng-app="myapp">
    <form ng-controller="ctrl">
        <select id="t1" ng-model="curval">
            <option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
        </select>
        <button ng-click="disabled[curval]=true">disable</button>
    </form>
</div>

a minimal controller for testing:

angular.module('myapp',[]).controller("ctrl", function($scope){
    $scope.options=['test1','test2','test3','test4','test5'];
    $scope.disabled={};
})

这篇关于如何禁用<选项>使用 AngularJS ng-options 时选择元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！