Issue
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}];
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.
Solution
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.
Template:
<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>
Inside controller:
$scope.disabledFruits = ["mango", "cherry"]
Answered By - Klaster_1 Нет войне
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.