如何禁用从Angular JS下拉列表中选择特定选项？ [英] How can I disable to select the particular option from Angular JS dropdown?

问题描述

我想禁用AngularJS下拉列表中的特定选项。

I want to disable a particular option from AngularJS dropdown.

它应该在下拉列表中列出，但不应该允许它被选中。所以我需要禁用它。

It should be listed in the dropdown but should not allow it to be selected. So i need to disable it.

MyFile.tpl.html

<select class="form-control" ng-model="selectedFruits" 
        ng-options="fruit as fruit.name for fruit in fruits">
</select>

MyController.js

$scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30},
                 {'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50},
                 {'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}];

此处所有水果名称应列在下拉列表中，但芒果和 cherry 应该被禁用，不应该允许用户选择它。

Here all the fruit names should be listed in the dropdown but mango and cherry should be disabled and should not allow the user to select it.

有可能吗？如果可能的话，请告诉我解决方案。

Is it possible? If possible, please let me know the solution please.

推荐答案

选择使用已禁用属性禁用选项。由于 ng-options 不支持禁用，因此您必须在 ng-repeat 中生成选项并设置< a href =http://docs.angularjs.org/api/ng/directive/ngDisabled =nofollow noreferrer> ng-disabled 基于要求。

select options are disabled with disabled attribute. Since ng-options doesn't support disabling, you'll have to generate options within ng-repeat and set ng-disabled based on requirements.

模板：

<select class="form-control" ng-model="selectedFruits">
    <option
        ng-repeat="fruit in fruits"
        ng-disabled="disabledFruits.indexOf(fruit.name) !== -1"
        ng-value="fruit">
         {{fruit.name}}
  </option>
</select>

内部控制人：

$scope.disabledFruits = ["mango", "cherry"]

< a href =http://jsbin.com/yozanimi/2/edit?html,js,output =nofollow noreferrer> JSBin 。

这篇关于如何禁用从Angular JS下拉列表中选择特定选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！