Tips for creating a functional null option using the select ng-options feature

Question

Tips for creating a functional null option using the select ng-options feature

While there are a few questions and answers on this topic, I have yet to find a solution that works for my specific case.

Imagine having an object like this:

$scope.person = {name: 'Peter', category1: null, category2: null};

Another variable receives a list of categories through a $resource call with results like this:

$scope.categories = [{id:1, name:'Supplier'}, {id:2, name:'Customer'}];

It's simple enough to create a select dropdown using ng-options to choose from the available categories and set the selected category.id as person.category1 or person.category2.

However, the challenge lies in making category1 mandatory while allowing category2 to remain a valid null value.

Essentially, what I need now is two select dropdowns with the following options:

//Select1
- Select Category1 (disabled)
- Customer (value: 1)
- Supplier (value: 2)

//Select2
- Select Category2 (disabled)
- No Category (value: null)
- Customer (value: 1)
- Supplier (value: 2)

EDIT

I have added a Plunkr based on @Mistalis answer, demonstrating the desired outcome: Each select dropdown should have a disabled placeholder option, with one supporting a "valid null option".

javascript angularjs angularjs-ng-options

Answer 1

Answer №1

To include a choice (blank) in your dropdown list, use the following code:

<select ng-model="categ.selected" ng-options="c.name for c in categories">
    <option value="">No category</option>
</select>

See Demo on Plunker

You can set categ.selected to null by default in your controller if necessary:

$scope.categ = {"selected": null};

Additional Info from Comment:

If you are unable to manually add 2 options in ng-options, consider adding the "No category" option within categories in your controller:

$scope.categories.push({id:null, name:'No category', noCat:'true'});

Note the noCat: 'true' which will be used to hide it from the initial dropdown list.

Your HTML code will now look like this:

<select ng-model="person.category1" 
        ng-options="c.id as c.name for c in categories | filter: {noCat: '!true'}">
    <option value="" disabled>Select Category 1</option>
</select>
<select ng-model="person.category2" ng-options="c.id as c.name for c in categories">
    <option value="" disabled>Select Category 2</option>
</select>

View New Plunker Example

Answer 2

To include a choice (blank) in your dropdown list, use the following code:

<select ng-model="categ.selected" ng-options="c.name for c in categories">
    <option value="">No category</option>
</select>

See Demo on Plunker

You can set categ.selected to null by default in your controller if necessary:

$scope.categ = {"selected": null};

Additional Info from Comment:

If you are unable to manually add 2 options in ng-options, consider adding the "No category" option within categories in your controller:

$scope.categories.push({id:null, name:'No category', noCat:'true'});

Note the noCat: 'true' which will be used to hide it from the initial dropdown list.

Your HTML code will now look like this:

<select ng-model="person.category1" 
        ng-options="c.id as c.name for c in categories | filter: {noCat: '!true'}">
    <option value="" disabled>Select Category 1</option>
</select>
<select ng-model="person.category2" ng-options="c.id as c.name for c in categories">
    <option value="" disabled>Select Category 2</option>
</select>

View New Plunker Example

Answer 3

Answer №2

When validating a form with Angular's form controller, be aware that empty values will not be considered valid. Instead, use the value (int)0.

  <select ng-model="person.category1" ng-options="category.id as category.name for category in categories | filter: {id: '!' + 0}" required>
    <option value="">Select Category 1</option>
  </select>
  <select placeholder="Select Category 2" ng-model="person.category2" ng-options="category.id as category.name for category in categories" required>
    <option value="">Select Category 2</option>
  </select>

To make the "Select Category" options unavailable to select at all, like a placeholder, add the disabled attribute to the <option>

For a demonstration, check out this jsfiddle link.

Answer 4

When validating a form with Angular's form controller, be aware that empty values will not be considered valid. Instead, use the value (int)0.

  <select ng-model="person.category1" ng-options="category.id as category.name for category in categories | filter: {id: '!' + 0}" required>
    <option value="">Select Category 1</option>
  </select>
  <select placeholder="Select Category 2" ng-model="person.category2" ng-options="category.id as category.name for category in categories" required>
    <option value="">Select Category 2</option>
  </select>

To make the "Select Category" options unavailable to select at all, like a placeholder, add the disabled attribute to the <option>

For a demonstration, check out this jsfiddle link.

Tips for creating a functional null option using the select ng-options feature

EDIT

Answer №1

See Demo on Plunker

Additional Info from Comment:

View New Plunker Example

Answer №2

Similar questions

Monitor modifications to a DOM element's ClientRect dimensions

Issue with React useCallback not being triggered upon a change in its dependencies

Guide on redirecting a webpage post form validation in JavaScript

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Reactjs: When components are reused, conflicts may arise in UI changes

I am looking to create a route with parameters in Next.js, as well as without any parameters

Disregard the significance of radio buttons - iCheck

Store the JSON file for future reference to extract additional information from it at a later time

Exploring the potential of npm init and harnessing the power of package.json

What is the best method for interacting with multiple links in Puppeteer?

jQuery does not provide the reference of a basic canvas element

When making an AJAX request and sending a JSON object, the server is returning an undefined

Dealing with an Incorrect Date in JavaScript

Adjust the dimensions of the dropdown menus

Calculator built with HTML, CSS, and JavaScript

using javascript to create two choices

Disabling form with customized component in AngularJS

Encountering difficulties displaying navigation interface with react native navigation's stack navigator

Storing information within a global variable array or exploring alternative methods

Integrating a fictitious style using jQuery