How to prevent users from selecting certain options using angular's ng-options

As per the Angular documentation

ng-options guidelines

I tried to implement this piece of code:

<select ng-model="model" ng-options="item.CODE as item.NAME disable when item.DISABLE for item in list" id="foo" name="foo" ng-change="change()">

However, it resulted in the following error:

Syntax Error: Token 'disable' is an unexpected token at column 11 of the expression [{3}] starting at [{4}].

Can someone help me understand what I'm doing wrong?

Answer №1

It appears that you are using the incorrect syntax. When disabling with an array, there are only two available syntax options.

  1. Specify disable when the value in the array is disabled
  2. Specify disable when the value in the array is disabled and track it by a specified expression

Here is an example to try out:

<select ng-model="model" ng-options="item.CODE disable when item.DISABLE for item in list track by item.ID" id="foo" name="foo" ng-change="change()">

Answer №2

Consider upgrading the angular.js version to access this feature. It was introduced in versions 1.4.X and later.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effective approach to exchange information among controllers in AngularJS

There are numerous techniques available to share data between controllers in Angular, such as accessing prototypical data from a parent scope, utilizing scope events for controller communication, or implementing shared services. However, what is considere ...

jQuery AJAX chained together using promises

In my current project, I am facing an issue where I have 4 get requests being fired simultaneously. Due to using fade effects and the asynchronous nature of these requests, there are times when empty data is received intermittently. To address this issue, ...

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

JavaScript - Capture user input and store it in a cookie when the input field is changed

Any help with my issue would be greatly appreciated. I'm currently working on saving the value of a form input type="text" to a cookie when the input has changed. It seems like I'm close to getting it right, but unfortunately, it's not worki ...

Angling for Success: How to Test Immediately Invoked Functions within a Directive Controller Using Jasmine

Imagine I have a directive: .directive('myDir', function(TemplateHandler){ return { ... controller: function(ExploreCmd){ this.foo = { bar: function(){...} }; this.foo.bar(); } } }); I want to verify t ...

Ensure that all links are opened in a new tab

When including _blank in the a href URL, my website contains various elements like iframes and ads from Adsense, Taboola,, etc. Currently, when a user clicks on an iframe or ad, it opens in the same window. Is there a way to ensure that all URLs (includin ...

The comparison between using multiple Vue.js instances and components, and implementing Ajax tabs

I am looking to incorporate ajax tabs using vue js. Each tab will need an ajax request to fetch both the template and data from an api. Here is an example of the tabs: <div id="tabs"> <ul class="nav nav-tabs"> <li class="active">& ...

What should be placed in the form action field if the router.post() method includes a parameter such as :id?

I'm struggling with how to properly submit data to my update form and what needs to be entered in the action field, especially considering the router.post includes an :id parameter. Below is the relevant code snippet: router.post('/gymupdate/:id& ...

My pathways are clearly mapped out, yet express is returning a frustrating 404 error

After exhausting all the similar posts on StackOverflow without finding a solution... Let's take a look at my app.js, which is the first file that the express library seeks when launching the app right after my server.js file responsible for setting ...

Guide to creating a Discord bot that replies privately to users without other channel members being able to see the messages

As a newcomer to Discord, I am attempting to create a bot that will respond to user commands by sending a reply that only the user who issued the command can see. However, I am struggling to figure out how to implement this feature. Below is the source c ...

The compatibility between Laravel's @vite('resources/js/app.js') and the froala editor plugin seems to be causing issues

I have incorporated a Vue.js based commenting system and inbox messages system in my Laravel website. Additionally, I am utilizing a wysiwyg editor (Froala Editor) in my forms for uploading projects. The issue I am facing is that the Froala Editor does no ...

How can I efficiently update child states within a parent class using ReactJS?

Exploring the parent component class Root extends React.Component { constructor(props) { super(props); this.state = { word: Words, }; } c ...

sending the AJAX request from back to the original JavaScript function

Here presents an issue. I am dealing with an HTML Form that contains a submit button with an onclick=validationFunction(). When this button is clicked, the form values are passed to the mentioned function. Within this function, the form values undergo va ...

AngularJS does not connect ng-model to the scope

Here is the code I am using for my search functionality: <ion-content class="has-header" id="content" push-search> <div id="search-bar"> <div class="item item-input-inset"> <label class="item-input-wrapper" id="search-input" ...

Header on top of table that stays in place with scrolling

I'm facing an issue with a table that contains user-generated data. We are utilizing a plugin known as Clusterize, which allows us to smoothly scroll through large amounts of rows. However, the specific markup required for this plugin seems to be caus ...

The JSON array provides the ideal syntax for looping purposes

I am working with JSON data and trying to check if a hovered element matches the names 'sports' or 'technology'. If there is a match, I want to retrieve the corresponding 'text' and 'image' values. However, I am only ...

Are you facing issues with Handlebars parsing?

I am struggling to identify the issue in my HTML/JS code. Here is my HTML/JS: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="handlebars-v1.1.2.js"> ...

If the condition is false, the Bootstrap 4 carousel will not transition to another slide

With Bootstrap 4, each slide contains a form section and there is a next button. I want to ensure that the carousel does not move to the next slide unless a certain variable is true (for form validation purposes). I have attempted using the onclick event ...

How can I prevent users from selecting text when they right click using JavaScript?

My custom context menu on canvas works well, but I'm facing an issue with Text elements. When I try to right-click on a text element, it triggers text selection as if double-clicking. I attempted to use the following code: document.addEventListener(& ...

The CSS navigation bar is not properly aligned in the center

This menu was constructed by me: JSBIN EDIT ; JSBIN DEMO Upon closer inspection, it appears that the menu is not centered in the middle of the bar; rather, it is centered higher up. My goal is to have it positioned lower, right in the middle. I ...