angularjs 如何禁用从Angular JS中选择特定选项?

wpcxdonn  于 2024-01-05  发布在  Angular
关注(0)|答案(2)|浏览(206)

我想禁用AngularJS中的一个特定选项。
它应该在列表中列出,但不应该允许它被选中。所以我需要禁用它。

MyFile.tpl.html

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

字符串

MyController.js

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


这里所有的水果名称都应该在菜单中列出,但是mangocherry应该被禁用,不应该允许用户选择它。
可能吗?如果可能的话,请告诉我解决方法。

b4qexyjb

b4qexyjb1#

使用disabled属性禁用select选项。由于ng-options不支持禁用,因此您必须在ng-repeat中生成选项,并根据需要设置ng-disabled
模板(T):

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

字符串
内部控制器:

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


JSBin的一个。

展开查看全部
iecba09b

iecba09b2#

刚刚遇到这个,值得一提的是,这是可能的,因为Angular版本1.4.0-rc.1
以下是文档ngOptions
一些对话Angular Github

  1. var app = angular.module("testApp", []);
  2. app.controller("testController", function($scope) {
  3. $scope.people = [{
  4. "id": "0",
  5. "name": "Homer",
  6. "surname": "Simpson",
  7. "isDisabled": false
  8. }, {
  9. "id": "1",
  10. "name": "Peter",
  11. "surname": "Griffin",
  12. "isDisabled": false
  13. }, {
  14. "id": "2",
  15. "name": "Philip",
  16. "surname": "Fry",
  17. "isDisabled": false
  18. }, {
  19. "id": "3",
  20. "name": "Humpty",
  21. "surname": "Dumpty",
  22. "isDisabled": true
  23. }, ];
  24. $scope.myPerson = $scope.people[2];
  25. });

个字符
Plunker
如果你设置禁用值为默认值,它不会工作,你会看到空白选定的项目,而不是。

展开查看全部

相关问题