Dynamically insert a disabled option in ng-options

Question

Dynamically insert a disabled option in ng-options

I'm struggling to create a division in my select/option dropdown menu. The dropdown structure I am aiming for is as follows:

NO IMAGE
CUSTOM IMAGE
rest of data....

Despite my efforts, the code doesn't seem to be working as expected. Can anyone provide assistance?

controller

$scope.teamListWithOptions.push({ name: "NO IMAGE" }, { name: "CUSTOM IMAGE" }, { name: "____________", notSelectable: true });

//this just adds the rest of the data
for (var a = 0; a < data.length; a++) {
  $scope.teamListWithOptions.push(data[a]);
}

html

<select class="form-control" ng-model="contentTeam1Selected" ng-change="selectContentTeam1(contentTeam1Selected)" 
                                ng-options="team as team.name for team in teamListWithOptions" ng-disabled="team.notSelectable">
                        </select>

javascript angularjs

Answer 1

Answer №1

For those utilizing a more recent version of Angular (>= 1.4 possibly), incorporating the disable when syntax within the ng-options attribute is an option. Here's an example:

ng-option="p as p.name disable when p.show == false for p in people"

An illustrative fiddle can be found here: http://jsfiddle.net/wwu071so/1/

Answer 2

For those utilizing a more recent version of Angular (>= 1.4 possibly), incorporating the disable when syntax within the ng-options attribute is an option. Here's an example:

ng-option="p as p.name disable when p.show == false for p in people"

An illustrative fiddle can be found here: http://jsfiddle.net/wwu071so/1/

Answer 3

Answer №2

You may consider using the orderBy function to group items within an optgroup in order to achieve your desired effect.

Check out this example on jsFiddle

<select
        ng-options="p as p.name group by p.show for p in people | orderBy:'show'"
        ng-model="selectedPerson"></select>

$scope.people = [
    { id: 1, name: 'Image' },
    { id: 2, name: 'Custom'},
    { id: 3, name: 'John', show: ' ' },
    { id: 4, name: 'Ben', show: ' ' }
];
$scope.selectedPerson = $scope.people[3];

Answer 4

You may consider using the orderBy function to group items within an optgroup in order to achieve your desired effect.

Check out this example on jsFiddle

<select
        ng-options="p as p.name group by p.show for p in people | orderBy:'show'"
        ng-model="selectedPerson"></select>

$scope.people = [
    { id: 1, name: 'Image' },
    { id: 2, name: 'Custom'},
    { id: 3, name: 'John', show: ' ' },
    { id: 4, name: 'Ben', show: ' ' }
];
$scope.selectedPerson = $scope.people[3];

Dynamically insert a disabled option in ng-options

Answer №1

Answer №2

Similar questions

Creating a Node.js application using Express requires careful consideration of file structure and communication methods

AngularJS - Array binding issue not updating in directive

At what point does Angular's link function execute?

React: Resolving issue of state becoming outdated after fetching data through a network request in the useEffect hook. Stale state no

Modify the output information in a VueJS dropdown menu

Show 1,000 as "one thousand" using AngularJS

Which option offers superior performance: using attributes through HTML or jQuery?

Is there a way to access an SD card by clicking on an HTML link using JavaScript?

The ngResource ($resource) method is displaying a 404 error when trying to send a

What exactly is the significance of the error message "The JSX element type 'Header' does not have any construct or call signatures"?

PHP causing syntax error when echoing HTML due to quotes being echoed along with the HTML code

Persistent change issue with JQuery CSS function

The resize function triggers twice as many events with each window resize

What is the best way to access document identifiers in a Firestore Database?

Tips on including variables within quotation marks in JavaScript

Attempting to display a randomly selected element from an array upon clicking a button, utilizing axios and a local JSON file. Is there something crucial that I am overlooking?

Expand and collapse button for viewing more content

Issue with jQuery .hover() not functioning as expected

How the Material-UI Tooltip zIndex takes precedence over the MenuItem in the Select component

The select2 does not show the selected information