Prevent reselection after model selection in AngularJS-chosen

Can someone assist me with this particular situation?

I have implemented single-select dropdowns in a table where each row has its own dropdown. There are 2 options for changing the selection:

  1. Clicking on the deselect ('x') icon (works fine - via ng-change).

  2. Opening the dropdown, selecting another value from the list. This overrides the previous value (even though ng-change fires, distinguishing between a new value or an overriding value is not possible).

I would like to prevent the second behavior. Is there a way to instruct 'chosen' that once a value is selected, the only way to choose a new value is by clicking on 'x'? For example: after a value is selected, disable the dropdown, hide the arrow icon, but keep the 'x' deselect icon active?

<select chosen
                            allow-single-deselect="true"
                            placeholder-text-single="'Select'
                            ng-model="row.userSelection"
                            ng-options="field as field.name for field in vm.fields">
                        <option value=""></option>
                    </select>

Thank you.

Answer №1

To disable the select option until a certain condition is met, you can use ng-disabled="$ctrl.model". This will prevent the user from making a selection until the "x" clears the $ctrl.model value. Once cleared, the select will become enabled again and a new choice can be made.

One possible solution could be to switch from using ng-options to simply listing out the options and applying ng-disabled directly to the option elements. According to the documentation, disabled options can be hidden from view, so if certain options are disabled, they should not appear in the dropdown list when selected.

I came across a plunker example with version 1.0, but it seems that disabling options still displays them in the list, although they become undefined when chosen. It's possible that a newer version of the tool has addressed this issue and now properly removes disabled options from view.

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

The login controller fails to retrieve any values upon submission

My current controller setup looks like this: var myApp = angular.module('myApp', ['ui.router']); myApp.controller('loginController',['$http', function($http) { this.loginForm = function(){ console.log(th ...

Utilize Multer to upload images stored within an array of objects

I've been having difficulty figuring out how to extract the images from an array of objects structured like this: import mongoose from "mongoose"; const prodcutSchema = new mongoose.Schema( { title: { type: String, require ...

Using socket.io and express for real-time communication with WebSockets

I'm currently working on implementing socket.io with express and I utilized the express generator. However, I am facing an issue where I cannot see any logs in the console. Prior to writing this, I followed the highly upvoted solution provided by G ...

Getting the Object Id from HTML and passing it back to the Controller in MVC using C#

JQuery: $("#shoppingCart").droppable( { accept: ".block", drop: function (ev, ui) { var droppedItem = $(ui.draggable).clone(); $(this).append(droppedItem); $.ajax({ type: "POST", ...

Clear out the existing elements in the array and replace them with fresh values

Within my Progressive Web App, I am utilizing HTTP requests to populate flip cards with responses. The content of the requests relies on the selected values. An issue arises when I choose an item from the dropdown menu. It triggers a request and displays ...

Please provide values in the input box, with each value separated by

I attempted the following code: success: function (result) { for (var i = 0; i < result.d.length; i++) { var emails = new Array(); emails = result.d[i].Emailid; alert(emails); $("#EmailCC").val(emails); ...

Dealing with problems in col-md display on tablet devices

When viewing on Full Screen and mobile, the ranges panel (class="col-md-3") displays correctly. However, on tablet screens, the left column is obscured by the youtube image panel (class="col-12 col-md-9"). I have attempted various adjustments to the div s ...

Arranging DIVs in a vertical layout

Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness. Here are some examples: Wider layout Taller layout I have tried using floats, inline-block display, ...

What causes bubbling among a parent's siblings?

When I create a simple slideToggle effect on click event, the '.close' event seems to be generating bubbles. Both unbind() and stopImmediatePropagation() have worked for me in the past, but for some reason e.stopPropagation() doesn't seem to ...

Having trouble with Laravel 5.5 and ajax file uploads?

I am encountering an issue with Laravel 5.5 while trying to get an ajax file. I can successfully receive the file using $_FILES, but $request->file() is not working as expected. Here is the code in question. Below are the HTML & Ajax elements: <htm ...

Load the React component asynchronously while waiting for the data to be fetched

My ReactJS component looks like this: import React, {useState} from 'react'; import Plot from 'react-plotly.js'; import {utility} from "./utility"; function Chart() { const [use_data, setData] = useState([]); c ...

The operation of "grunt build" results in a Lexer Error, causing the ng-include

After deploying my unminified code successfully, I proceed to run grunt build and deploy from the dist folder. However, upon checking one of the pages, I encounter a breakage with an error in the console: Error: [$parse:lexerr] Lexer Error: Unexpected nex ...

Dynamically submitting a form generated within the AJAX success callback in CodeIgniter

After creating a form dynamically within the success function of an AJAX call, I expected it to submit like a normal form in CodeIgniter. However, upon clicking the submit button, the form data is not being picked up by the appropriate controller. The ori ...

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

Formula for determining the slider's span

I recently created a range slider using Vue.js It has a minimum and maximum value, assumed to be percentages as it ranges from 0 to 100. My goal is to set the minimum value at $5,000 and the maximum at $200,000, However, I struggle with math and need th ...

There are a multitude of unfamiliar files within the node_modules directory

I've been following a tutorial by Kent C. Dodds on creating an open source library. In the process, I used npm to install various packages such as chai, commitizen, cz-conventional-changelog, mocha, and unique-random-array. Recently, I noticed that m ...

How to customise the templateUrl function in AngularJS

Since I don't want every partial template to be cached, I am taking this approach: .directive('myMessages', [ function () { return { restrict : 'E', templateUrl : 'wwwroot/base/messages/ui.partial.messages ...

Failed to perform the action using the Angular Post method

Currently, I am exploring the use of Angular with Struts, and I have limited experience with Angular. In my controller (Controller.js), I am utilizing a post method to invoke the action class (CartAction). Despite not encountering any errors while trigge ...

Validating forms in Angular-CLI

The code below displays the output of my executed code: I am facing an issue with validations. Even when clicking the AddEmployee button without entering any data, it still gets added to the dataset. Below is the HTML code for app.component.html: <div ...

Unable to add JSON data to Javascript List Object? Consider using a combination of Node.JS and Firebase for a

router.get('/getMeals',function(req,res){ var mealsList = []; mealsList.push("bar"); mealsRef.on("value",function(data){ data.forEach(function(child){ console.log(child.val()); var newMeal = child ...