AngularJS automatically selects the first value within a select box

Is it possible to highlight the first value 'fullName' in a select box using angularjs? I am currently using angularstrap selectbox.

controller,

  $scope.accountInfo.owners = [  
   {  
      "accounts":null,
      "phoneumber":null,
      "email":null,
      "fullName":"MITA DASGUPTA",
      "mobilePhoneNumber":null,
      "noteFlag":false,
      "number":130000000484
   }
]

Template,

<button type="button" class="btn btn-default" placeholder="Please select" 
  data-ng-model="owner.fullName" 
  data-html="1" 
  bs-options="owner as owner.fullName for owner in accountInfo.owners"  
  bs-select>
    Action <span class="caret"></span>
</button>

I have attempted this method, however the default value is not being selected. Any suggestions?

javascriptangularjstwitter-bootstrapangular-ui-bootstrapangularjs-ng-options

Answer №1

To avoid conflicts, consider using a different ng-model name instead of reusing owner in ng-options, such as selectedOwner

<button type="button" class="btn btn-default" placeholder="Please select" 
  data-ng-model="selectedOwner" 
  data-html="1" 
  bs-options="owner as owner.fullName for owner in accountInfo.owners"  
  bs-select>
    Action <span class="caret"></span>
</button>

Remember to assign the value of ng-model from the controller.

$scope.selectedOwner = $scope.accountInfo.owners[0];

Answer №2

Make sure to set up the model properly before capturing any selected values. One common way to do this is by using an ng-init, but you can also initialize the model directly in your controller with the first element of your array (along with the correct field).

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

Extend the iframe size without refreshing the HTML content leveraging solely CSS

My experience in web development is still limited, but I have a requirement to display an iframe within a larger window without refreshing the HTML content inside it. I prefer to achieve this using just JavaScript/CSS, but I'm not sure where to start. ...

javascriptjqueryhtmlcssiframe

Enhanced hierarchical organization of trees

I came across this code snippet: class Category { constructor( readonly _title: string, ) { } get title() { return this._title } } const categories = { get pets() { const pets = new Category('Pets') return { ge ...

javascripttypescript

What are some reasons for the slow performance of AWS SQS?

My current project involves measuring the time it takes to send a message and receive it from an SQS queue. Surprisingly, the average time it takes is between 800-1200 ms, which seems like an excessively long period. Below is the code I have been using for ...

javascriptnode.jsamazon-web-servicesamazon-sqs

Prevent unauthorized AJAX requests from external sources within the Node application

I am looking for a way to prevent AJAX requests from being made outside of my application. I need to ensure that the response is not sent when the AJAX request is initiated from external sources, even if the URL is copied and pasted into a browser. My te ...

javascriptjqueryajaxnode.jsexpress

"415 (Unsupported Media Type) encountered when making a POST request in a REST API

I've encountered an issue with a React component where a checkbox triggers a POST request to a REST API with a single parameter. Despite setting a breakpoint in the WebAPI code, it's not being hit and I'm receiving a 415 Unsupported Media Ty ...

javascriptjqueryreactjsasp.net-web-apiasp.net-web-api2

Sending an event to a component that has been rendered in Vue

I'm currently in the process of developing a custom rendered component that will execute a function when clicked on: // Creating a standard Vue component with a render function Vue.component('greeting', { methods: { sayHello(){ ...

javascriptvue.js

When running 'npm run dev', an error occurred after the SizeLimitsPlugin emitted at 98%. The specific dependency that was

I encountered an issue while trying to incorporate Google Maps into my Laravel project and received the following error message after running npm run dev: 98% after emitting SizeLimitsPlugin ERROR Failed to compile with 1 errors 10:52:34 PM This dependen ...

javascriptnode.jsnpmwebpacksass

unable to access objects in JavaScript due to an error

The JSON data I received from PHP is shown in this image: https://i.sstatic.net/kj9QU.png Now, I need to access all the data from the JSON file. In my current situation, I am trying to compare the existing data with the JSON data. However, I encountered ...

javascriptphparraysjson

Angular JS time picker is the easiest and most user-friendly option for selecting the

Hello everyone, I'm looking for a straightforward timepicker popup solution for AngularJS. I've tried a few options like the timepickers found at http://embed.plnkr.co/2ReOvuuhtNNcgtmWycOt/ and , but ran into injection errors. Any suggestions ...

angularjstimepicker

To compare two JSON files that contain identical values but different keys in order to generate a consolidated table

My goal is to create a comprehensive table by merging data from two different JSON files. One file contains names, work positions, and ages, while the other file includes emails, names, and job roles. The challenge lies in the fact that they use different ...

javascriptjqueryjsonmustache

What is the best way to assign multiple values to a single key without replacing the existing value?

My goal is to store multiple values for a single key by utilizing arrays within my main object. I've been struggling with this and feeling discouraged, questioning why I thought I could accomplish it. Can someone provide guidance on the best approach ...

javascriptarraysobjectecmascript-6

The Jquery .change() function refreshes the results just once

I am working on a form with 3 input fields named #first, #second, and #third, along with a fourth field labeled as #theResult. <div id="addFields"> <span id="addFieldsHeader">Add The Fields</span> <table style="margin:0 auto;"> ...

javascriptjquery

What is the best way to choose all elements that fall between two specific elements?

Looking to grab content situated between two specific elements within an HTML structure. The HTML snippet in question is as follows... <h2>This is firsty</h2> <p>Some para</p> <ul> <li>list items</li> <li&g ...

javascriptjquery

Distinguishing the scope binding in AngularJS: Understanding the variance between {foo : ""=""} and {foo : ""=myFoo

While developing web applications in angular, I have come across two different methods for binding variables on the scope. Despite my efforts to understand the difference between them, I always seem to be mistaken. After conducting extensive research, I ha ...

angularjsbindingscope

Error: StalePageException occurred in the wicket framework

I am currently using Wicket version 6.20. Within a Wicket page, I have implemented an AbstractDefaultAjaxBehavior to capture mouse clicks and their x,y coordinates: class CallFromJavaScript extends AbstractDefaultAjaxBehavior { private static final l ...

javascriptjavaajaxwicket

Is there only a single particle in Three.js?

I am trying to add a single particle to my scene and have the ability to move it around. However, my attempts to do so without using a Particle System have been unsuccessful. Whenever I try to render the particle as a mesh, nothing appears on the screen. I ...

javascriptthree.jswebgl

Error message: Angular - global is not defined when using Firebase

Click here to view the error image An error occurred due to a global reference issue in the following files: Object../node_modules/firebase/auth.js (auth.js:255), webpack_require (bootstrap:81), Object../node_modules/angularfire2/auth/auth.js (ven ...

javascriptangulartypescriptfirebase

The issue with the Woocommerce quantity increment buttons not functioning properly persists after an AJAX refresh, and the automatic load feature only activates after two

I've hit a brick wall with this particular issue. Many people have suggested solutions, but none seem to be effective for me. My situation probably resonates with quite a few individuals: I decided to customize the WooCommerce quantity input (/global ...

javascriptjqueryajaxwordpresswoocommerce

Using setTimeout within a loop to prevent any blocking operations

Here are some code snippets to illustrate my question: var webSocketsServerPort = 8002; var webSocketServer = require('websocket').server; var conns = []; I populate the array conns with users' information after they successfully connect, ...

javascriptnode.jswebsocketsettimeout

Why won't my accordion collapse? The other one just like it is functioning properly

http://plnkr.co/edit/xUuZyQTES83yccFRcc4K?p=preview Have a peek at my plunker that showcases the exact issue I'm facing. I've minimized my code as much as possible. I've reviewed my code thoroughly and unfortunately, I cannot pinpoint what ...

angularjsaccordion