Each time bootstrap-select is used, it seems to choose the incorrect option

I'm currently working with Bootstrap-select v1.7.2 in an Angular project. However, when I choose an option from the dropdown menu, it ends up selecting a different one.

The Plunker setup can be found here:

http://plnkr.co/edit/HPPlxx?p=preview

(the code is located in dashboard.html and dashboard.js)

This is how I have set it up. The bootstrap-dropdown directive triggers the dropdown functionality.

  <form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
        <select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
           <option ng-repeat="logic in vm.Logics" value="{{logic.value}}">{{logic.displayName}}</option>
        </select>
        <button type="submit" class="btn btn-sm text-right">Save</button>
     </form>
javascriptangularjstwitter-bootstrapbootstrap-select

Answer №1

This solution should address your issue effectively. Including a blank state option is essential in this context. Additionally, utilizing ng-options instead of ng-repeat within the option can significantly improve the functionality. We trust that these adjustments will resolve your problem swiftly! 

<div ng-controller="dashboard as vm">
   <div class="block-area">
      <div class="row col-md-12 ">
         <h3 class="block-title">  {{vm.title}}</h3>
         <form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
            <select required ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" ng-options="logic.displayName for logic in vm.Logics track by logic.displayName" bootstrap-dropdown >
               <option value="">Choose One</option>
            </select>
            <button type="submit" class="btn btn-sm text-right">Save</button>
         </form>
      </div>
   </div>
</div>

Answer №2

For populating the option elements in a select input, it is recommended to utilize ng-options.

Example:

<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics track by logic.value" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
    <option value="">Select...</option>
</select>

UPDATE

Consider using the following code snippet:

<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics" check-validation class="validate[customFunc]" bootstrap-dropdown>
         <option style="display:none" value="">Select</option>
</select>

In this case, ensure that you create a new custom validation function called customFunc to validate that the selected value is not empty ("").

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

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

javascriptjquerycss

The useNavigate function fails to override the dynamic parameter

We recently updated our project from using version 4 of react-router to version 6. However, we are facing an issue after switching from the useLocation API to useNavigate and I am having trouble identifying the cause. Here is a snippet of my function: im ...

javascriptreactjsreact-routerreact-router-dom

Unable to determine the reason behind the code getting stuck in an endless loop

Check out this code snippet: import React from 'react'; import Card from './components/Card'; import './App.css'; import Buttongrp from './components/Buttongrp'; import { useEffect, useState } from 'react'; ...

javascriptreactjsfrontend

Using either Canvas.toBlob or Canvas.toDataURL results in me obtaining an image with a transparent

Hey there! I'm currently working on a project that requires the user to crop and upload images. For cropping, I am utilizing react-cropper. My challenge lies in dealing with Chrome's limitation on dataURL to 65529 pixels as mentioned in this M ...

javascripthtmlgoogle-chromecanvasdata-uri

What is the process for manually testing a TypeScript function within a React application?

Hey there, I have a question as a beginner. I am currently using React and TypeScript with create-react-app, and I have some JavaScript code that is not related to the user interface (it's a module for working with a REST API). Here is an example of w ...

javascriptreactjstypescriptecmascript-6es6-modules

Production environment experiencing issues with Stripe functionality due to element remaining mounted

When making a payment in development mode, everything goes smoothly. However, when I switch to production, I encounter the following error message: v3:1 Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element. Please e ...

javascriptreactjsstripe-paymentsproduction

Ways to enhance the visual presentation of a Web Component class

I am currently developing a @Component decorator that modifies the constructor of a class to perform additional tasks after it has been instantiated. The functionality is implemented in an init method, as shown in the code snippet below. export function C ...

javascriptcustom-element

Passing an array of integer arrays to a controller method in ASP MVC using Ajax

I am encountering an issue with my AJAX call when trying to post data entered by the user on the webpage to a controller method. Unfortunately, the data never reaches the controller and always results in an error. I suspect that the problem lies in the typ ...

javascriptjqueryarraysajaxasp.net-mvc-5

Struggling to fix TypeScript error related to Redux createSlice function

Here is the code snippet I am working on: import { Conversation } from "@/types/conversation"; import { PayloadAction, createSlice } from "@reduxjs/toolkit"; const initialState: Conversation | null = null; export const conversationSli ...

javascripttypescriptreduxredux-toolkit

Tips on converting Django model into desired format for Bootstrap-tables plugin integration

I want to integrate the bootstrap-table plugin with server-side functionality using Django Rest Framework to populate the data on the table. However, I keep getting the message "No matching records found". After some investigation, I discovered that a spec ...

javascriptjsondjango-rest-frameworkbootstrap-table

Is there a way to ensure that mongoose waits for document creation before disconnecting?

I'm struggling to figure out what I'm doing wrong here. My goal is to finish seeding my database before disconnecting, but I can't seem to find the right solution. database.js import mongoose from 'mongoose'; mongoose.connect(pro ...

javascriptnode.jsmongodbmongooseasync-await

NodeJS allows for the dynamic import of modules, enabling a flexible

I'm currently developing a CLI package within a monorepo that contains a command called buildX. This command goes through various directories, attempting to use the require function to locate a module within certain files in those directories. In ess ...

javascriptnode.jsrequirejsnode-modulescommonjs

What is the process for delineating a smaller object within a larger one?

The current data structure I am handling: this.currentData = [ { "1304": { "id": 6458, "data": "Data1", "created_at": "2020-10-20 23:16:38", "updated_at": & ...

javascriptarraysjsondata-structuresfilter

After replacing content with replaceWith in jQuery, the load event can

Currently, my goal is to use AJAX to load new content and replace the existing content on the page with this newly downloaded information. However, I am facing an issue in binding the load(handler(eventObject)) event for the replaced data. My requirement i ...

javascriptjqueryajax

Sort JSON data based on keys (not values)

I have the following JSON data: json = [{ "code3": "ALB", "asset": 9, "biodiversity": 4, "infrastructure": 15 }, { "code3": "GHN", "asset": 4, "biodiversity": 5, "infrastructure": 5, }, { "code3": "TGO", "asset": 3, ...

javascriptjsonfilter

What could be the reason behind the malfunctioning of $.getjson?

I've been facing issues trying to access remote json data. Initially, I resorted to using as a temporary fix but it's no longer serving the purpose for me. As of now, I am back at square one trying to resolve why I am unable to retrieve the remo ...

javascriptjquery

Form submission button gets stuck after AJAX request is made

Hey there, I'm currently working on a form that utilizes Ajax for making a post in Rails 4. The JavaScript in the form includes some validation checks and is supposed to display an alert message upon successful posting. However, I'm facing an iss ...

javascriptjqueryajaxforms

Oops! Looks like there's a problem with the helper called "if_equal" in Handlebars

I attempted to incorporate handlebars into my express node application, but it appears to be malfunctioning. const express = require('express'); const hbs = require('hbs'); const expressHbs = require('express-handlebars'); c ...

javascriptnode.jsexpresshandlebars.js

Adding Rotation to a group in Three.js using a pivot point

I'm currently in the process of constructing a Rubik's Cube using Three.js. My method involves grouping all the small cubes that need to be rotated together and then performing the rotation on the group as a whole. To determine the pivot point fo ...

javascriptthree.jsrotation

The script functions perfectly on one page, but encounters issues on another page

I'm currently working on developing an iOS7 WebApp using a template that I came across on this website: After writing some JavaScript/jQuery to create a fading effect for a picture and a toolbar, and testing it successfully on a blank page, I encount ...

javascriptjqueryhtmlcss