When using angular-ui-select and having an empty <option>, it displays two blank fields

I have implemented angular-ui-select for dropdowns and I want to include a cancel feature in the dropdown.

This is the dropdown structure in my template:

<select ui-select2="select2Options" name="Machine" ng-model="selectedMachine.type" data-placeholder="type" required>
    <option value=""></option>
    <option ng-repeat="type in machineTypes" value="{{type}}">{{type}}</option>
</select>

Here are the select2Options settings:

$rootScope.select2Options = {
  minimumResultsForSearch: 5,
  allowClear: true,
  ...
}

Upon implementation, the result looks like this:
https://i.sstatic.net/Fatgc.png https://i.sstatic.net/LAImM.png

One issue I encountered is the presence of empty fields due to having 

<option value=""></option>
, which is causing unexpected behavior.

Removing 

<option value=""></option>
resolves the empty field problem, but it also removes the cancel button from the dropdown:
https://i.sstatic.net/9G5nm.png

What steps should I take to ensure the presence of a cancel button without having empty fields?

angular: v1.4.8
angular-ui-select2: v0.0.5
select2: v3.4

javascriptangularjsangular-uiui-select

Answer №1

Check out this suggestion

  <select ui-select2="select2Options" name="Machine" ng-model="selectedMachine.type" data-placeholder="type" required>

<option value="" selected="selected">Choose a Machine</option>
<option ng-repeat="type in machineTypes" value="{{type}}">{{type}}</option>
</select>

Answer №2

Although it may be considered a less-than-ideal workaround, I found myself unable to update the "angular-ui" to the latest version in my particular situation.

  1. Navigate to the angular-ui.js file
  2. Locate angular.module('ui.select2'
  3. Change "priority: 1" to priority: 1001

It seems that in newer versions of AngularJs, the priority of ng-repeat has been raised to 1000. This results in the DOM being modified before the "select2" directive can establish its watchers.

By increasing the priority, the select2 directive is able to watch for changes once the ng-repeat adds 'options' to the DOM.

Answer №3

Here is a possible representation of your code:

<select ui-select2="select2Options" name="Machine" ng-model="selectedMachine.type" data-placeholder="type" ng-options="item.type for item in machineTypes" required>
    <option value=""></option>
</select>

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

Update the value after verifying the element

I am trying to retrieve data from my database and update the values when an element is clicked (accepting user posts). The code I have written seems to work, but I encounter an error stating that props.actions is not a function when clicking on an element. ...

javascriptreactjsajaxredux

While conducting tests on a Vue single file component, Jest came across an unforeseen token

I need help with setting up unit tests for my Vue application that uses single file components. I've been trying to use Jest as mentioned in this guide, but encountered an error "Jest encountered an unexpected token" along with the details below: /so ...

javascriptvue.jsjestjs

What is the best way to deactivate ng-repeat using a button in AngularJS?

How can I disable the apply button once it has been clicked by the user in a list of stores based on services? I am using ng-repeat to display the listing. Additionally, how can I write an apply function to disable a particular service once it has been app ...

javascriptjqueryangularjs

The absence of a label or div element on a JavaScript checkbox change event is causing issues

Currently, I am constructing a webpage utilizing ASP.NET web forms in combination with JavaScript and jQuery. The main objective is to create a functionality for a checkbox that reacts to a change event as follows: when the checkbox is checked, display thr ...

javascriptjqueryasp.net

Tips for enlarging the box width using animation

How can I create an animation that increases the width of the right side of a box from 20px to 80px by 60px when hovered over? What would be the jQuery code for achieving this effect? ...

javascriptjqueryhtmlcss

MongoJS Node findOne query inaccurately returns empty result set

Utilizing MongoJS: https://github.com/mafintosh/mongojs Retrieves all data Returns an empty array</p> The database contains the data I am looking for. I've also tried searching using a different key (such as name). Why is it unable to locate ...

javascriptnode.jsmongodbexpressmongojs

Utilizing CSS-in-JS to eliminate arrow buttons from a TextField

I'm currently developing a webpage using React and Material-UI. One of the components I have is a TextField element, and I need to remove the arrow buttons that typically appear on number input fields. If I were utilizing CSS, I could easily achieve t ...

javascriptcssreactjsmaterial-uireact-with-styles

utilize angularjs to apply the ng-show directive to an input's placeholder icon

Looking to customize the placeholder icon on an ionic-input element, I am using a ng-show directive with two different icons. In my controller, I compare the values of two password fields for equality. If they match, a checkmark icon is displayed; if not, ...

angularjsionic-framework

FirebaseError encountered: Unable to update document due to absence of document. Updating document is only possible if document id is hard coded

For my latest project, I have a component that can successfully create a new user and add them to the database using the function createUserWithEmailAndPassword(auth, email, password). Now, I am working on another component that will allow users to edit t ...

javascriptnode.jsreactjsgoogle-cloud-firestore

I noticed that when I include the www in the URL, I am unable to retrieve the API results. However, when I exclude the

Whenever I try to access my website through www.mywebsite.in, it fails to display my data. However, if I visit the site without the www prefix, everything works fine and I can retrieve data from the database. I'm currently utilizing APIs for both get ...

javascriptasp.netapi

The error message "Unexpected TypeError: useSearchParams either does not exist as a function or is not iterable in its return value

I'm currently facing a problem with my code, which results in the error message: "Uncaught Error: NextRouter was not mounted" appearing in the console. After some investigation, I discovered that with Next.js version 13 onwards, we should ...

javascriptreactjsnext.js

Interactive HTML and PHP form designed to compute and display the result of a straightforward mathematical equation

I'm looking to add a dynamic HTML/php form on my webpage that can solve the following formula instantly without any page refresh. I am confused about the best approach and the code required to make it happen. The formula I want to implement is as fol ...

javascriptphpjqueryhtml

Transforming a form containing recurring elements into JSON

Sorry if this topic has already been discussed, I wasn't able to locate any information I currently have an html form structured like so: <form> <div> First Name <input name="FirstName" type="text"> Age <input name="Age" t ...

javascriptjqueryjson

The anchor tag is not being used in the function call in an Angular application

Having trouble with calling the logout function inside the login controller. The setup involves a simple login and logout system using ui-router. After successfully logging in and navigating to another page, I encountered issues with calling the logout fu ...

javascriptangularjs

I'm encountering a "confirm" error within the data table. Any suggestions on how to resolve this issue?

When I try to use two datatables columns in confirm, an error occurs when the text 'do you want cancel?' is displayed. The issue seems to be with the text itself and not the code. How should we go about fixing this problem? This is my current cod ...

javascriptphphtmldatatables

Invoking an express route using JavaScript

After successfully defining some routes, including a text input search field at the top of the page, I created a listener function as shown below: $('#tags').keypress(function(e) { if (e.keyCode == 13 && document.getElementById('t ...

javascriptnode.jsexpress

Customizing content based on Route - Utilizing Node.js/React

I am currently working on setting up routes for different pages of store profiles in my Node app. I have been doing some research online and have come to understand how to adjust the parameters, but I am struggling with figuring out how to dynamically chan ...

javascripthtmlnode.jsreactjsexpress

bespoke slickgrid dropdown editor

I am currently working on implementing a slickgrid feature where a cell needs to display a dropdown (selectlist) with values fetched from a restful service. These values will vary for each row. The requirement is that the user should be able to select one ...

javascriptslickgrid

Timing feature utilized in a Web Application

My latest project involves developing a web-based testing application using CakePHP. Here's how it works: when a user starts a test, the exact start time is stored on the web server. Once the test is completed and the answers are submitted, the serve ...

javascriptajaxcakephptimer

What could be the reason for a jQuery script failing to execute when included in a PHP include statement from a different PHP page?

I'm currently working with javascript and php to manage cookies across different pages. On one page, I have a script that sets a value in a cookie variable and I want to retrieve that value on another page. Let's say the first page is named page1 ...

javascriptphpjqueryhtml