How can I disable to select the particular option from Angular JS dropdown?

Question

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.

jsfiddle.net/alalonde/dZDLg/5

karaxuna
– karaxuna

2014-02-25 05:54:52 +00:00
Commented Feb 25, 2014 at 5:54 — karaxuna
– karaxuna, Commented Feb 25, 2014 at 5:54

P J · Accepted Answer · 2017-10-06 07:15:01Z

6

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

JSBin.

edited Oct 6, 2017 at 7:15

P J

701 gold badge4 silver badges25 bronze badges

answered Feb 25, 2014 at 5:58

Klaster_1 Нет войне

12.2k9 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ggorlen · Accepted Answer · 2023-12-02 06:40:48Z

Just came across this and it worth mentioning that this is possible as of Angular version 1.4.0-rc.1

here are docs ngOptions

and some conversations Angular Github

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

<!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>

and Plunker

If you set disabled value as default it wont work and you will see blank selected item instead.

Collectives™ on Stack Overflow

How can I disable to select the particular option from Angular JS dropdown?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related