如何禁用從Angular JS下拉列表中選擇特定的選項？

我想從AngularJS下拉菜單中禁用特定的選項。如何禁用從Angular JS下拉列表中選擇特定的選項？

它應該在下拉列表中列出，但不應該允許它被選中。所以我需要禁用它。

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}];

這裏所有的水果名稱應在下拉列表中列出，但芒果和櫻桃應被禁用並且不應該允許用戶選擇它。

可能嗎？如果可能，請讓我知道解決方案。

來源

2014-02-25 prince

http://jsfiddle.net/alalonde/dZDLg/5/ – karaxuna

select選項被禁用，並且disabled屬性。由於ng-options不支持禁用，因此必須根據要求在ng-repeat內生成選項並設置ng-disabled。

模板：

<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"]

JSBin。

來源

2014-02-25 05:58:32

過這個剛剛來到，它值得一提的是，這是可能的角版本1.4.0-RC.1的

這裏有文檔ngOptions

和一些談話Angular Github

HTML：

<!DOCTYPE html> 
<html ng-app="testApp"> 

<head> 
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script> 
    <link href="style.css" rel="stylesheet" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller="testController"> 
    <select ng-model="myPerson" ng-options="person.name disable when person.isDisabled for person in people"> 
    </select> 
</body> 

</html>

JS：

var app = angular.module("testApp", []); 

app.controller("testController", function($scope) { 
    $scope.people = [{ 
    "id": "0", 
    "name": "Homer", 
    "surname": "Simpson", 
    "isDisabled": false 
    }, { 
    "id": "1", 
    "name": "Peter", 
    "surname": "Griffin", 
    "isDisabled": false 
    }, { 
    "id": "2", 
    "name": "Philip", 
    "surname": "Fry", 
    "isDisabled": false 
    }, { 
    "id": "3", 
    "name": "Humpty", 
    "surname": "Dumpty", 
    "isDisabled": true 
    }, ]; 

    $scope.myPerson = $scope.people[2]; 
});

和Plunker

如果設置禁用值默認情況下它不會工作，你會看到空白的選擇項的方式。

來源

2015-05-08 14:51:58 vidriduch

如何禁用從Angular JS下拉列表中選擇特定的選項？

回答

相關問題