Tips for setting a pre-selected default value in Angular's Chosen feature

I am implementing an angular chosen function on my select tag.

Below is the code for my select tag:

<select name="rname" id="rname" ng-model="rname" ng-init="rname='CustomReport'" 
   ng-options="key as value for (key , value) in reportsValuesOptions track by key" chosen>
        <option value="">---Select---</option>
</select>

The select tag above is populated from this object:

$scope.reportsValuesOptions = {'Cash Position Report':'Cash Position Report','Detail Report':'Detail Report','Reconciliation Report':'Reconciliation Report','Summary Report':'Summary Report','Sweep Report':'Sweep Report','FCCS/FBPS Detail Report':'FCCS/FBPS Detail Report','CustomReport':'Custom Report Name'};

This object contains pairs of values and options for the select tag where the key represents the option's value and the value represents the option's text.

I want to set the default value of the select tag to 'CustomReport' as the option value and 'Custom Report Name' as the option text using ng-init, but it seems to not work.

Is there a way to correctly set the default value based on the object's key-value pair?

VIEW FULL EXAMPLE

javascriptangularjsangular-chosen

Answer №1

Your solution may not work properly with AngularJS because it is designed to handle arrays, not objects. To fix this, make sure your reportsValueOptions variable is an array of objects like the example below:

[
  {label: 'First Label', value:'first-option'},
  {label: 'Second Label', value:'second-option'}
]

I've updated your code in this jsfiddle link with the corrected object structure that also indicates the selected option.

If you want to delve deeper into the issue with using objects in AngularJS, check out this resource: https://docs.angularjs.org/api/ng/directive/ngOptions#complex-models-objects-or-collections-

Answer №2

Here is an example of how to use ng-init:

<select ng-init="selectedOption = options[0]" 
        ng-model="selectedOption" 
        ng-options="option.name for option in options">
</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

Possible problem that may arise when using Express without Jade

I've been experimenting with Express for my latest project, and I came across the suggestion to use the Jade template engine for views like this: /* GET home page. */ router.get('/', function(req, res, next) { res.render('index' ...

javascriptnode.jsexpresspug

Tips for saving a complete HTML page as a JPEG image

I have a lengthy page that I would like to save as a jpeg file. After searching, I came across a tool that seems to be close to what I need: However, the issue is that it doesn't allow me to save the screenshot as jpeg. It captures the screenshot su ...

javascriptphpjqueryhtml

What is the underlying mechanism of Angular's $broadcast and $emit for sending message objects - value or reference?

Here is the code snippet for reference: let data = { key1: value1, key2: value2, // more keys }; $scope.$broadcast("EventName", data); When the event consumer receives the data, does it receive a reference to data or a copy? ...

angularjs

How can I combine an onkeypress and onclick event listener in one method?

I have two inquiries, somewhat intertwined. 1) Is it feasible to merge the 2 functions below into a more efficient function, or do I need to create a function and then call it in both event listeners? input.addEventListener("keyup", () => { if (eve ...

javascripthtmladdeventlistener

Supertest and Jest do not allow for sending JSON payloads between requests

Below is the test function I have written: describe("Test to Create a Problem", () => { describe("Create a problem with valid input data", () => { it("Should successfully create a problem", async () => { const ProblemData = { ...

javascripttypescriptexpressjestjssupertest

The functionality of the Firebase Realtime Database has ceased

After successfully developing an app with Firebase's Real-time Database for the past month, I suddenly encountered an issue today. Despite the authentication features working seamlessly, my app is no longer able to retrieve data from Firebase. It&apos ...

javascriptfirebasereact-nativefirebase-realtime-database

"Trouble with Heroku: JavaScript script failing to load with 404

My adventure in building my first web app using MEAN on Heroku has been both thrilling and frustrating. I meticulously followed their guide to set up a sample app, downloaded the code, and made modifications to have a customized login page. However, I hit ...

javascriptangularjsnode.jsherokuexpress

Verify your credentials in Geoserver using ASP.NET and IIS

Is it possible to integrate asp.net authentication with openlayers? I have created a Login page for authenticating in openlayers using C# on the server side. Here is an example of my code: Uri uri = new Uri("http://"+username+":"+password+"@localhost:197 ...

javascriptasp.netopenlayersgeoserver

What are your thoughts on this method for preventing scrolling?

Is there a way to prevent scrolling of the underlying content on a webpage when a modal is displayed? I found this code snippet that achieves that. (http://jsfiddle.net/77P2e/) var $window = $(window), previousScrollTop = 0, scrollLock = false; $window.s ...

javascriptjquery

Is it possible to modify the contents within the JSP div tag without replacing them through an AJAX call?

In my JSP, I face a scenario where there is a div tag with scriptlet content that pulls data from the database every time a request is received from the server. Previously, I was refreshing the entire page with each update, which not only loaded all the re ...

javascriptjqueryajaxjspscriptlet

Svelte is unable to bring in

Hey there, I'm new to Svelte and currently working on a simple feedback app. I have divided my project into two files - one for the main app and another for a list of feedbacks. Here is my App.svelte file: <script> import feedback from ". ...

javascriptnode.jsimportexportsvelte

Cookie Consent has an impact on the performance of PageSpeed Insights

On my website, I have implemented Cookie Consent by Insights. The documentation for this can be found at However, I noticed a significant drop in my Google PageSpeed Insight scores after loading the JavaScript source for Cookie Consent. The main issue hig ...

javascriptjquery

Storing data securely with Firebase: Executing the task 'uploadBytes'

I am currently learning how to use Firestore for my database. I have been trying to send data from state to the database, but I keep encountering an error message that says "uploadBytes" cannot be performed on a root reference. Since I am not very familiar ...

javascriptreactjsfirebasefirebase-storage

Images are not being displayed properly in CapacitorJS

Issue with CapacitorJS loading images from JavaScript file. I encountered a problem with my CapacitorJS project where images were not loading when called inside the JavaScript file. In one example, the image file did not show up, but in another example it ...

javascriptionic-frameworkcapacitor

adding items into an array with the help of angularjs

The current code is functioning correctly and displaying the desired output, but I now wish to save each string or entry in an array to prevent loss of entered data. Currently, it only works for one item, but I need it to support multiple items and store t ...

angularjs

Would you like to learn how to extract data from a specific textbox using jQuery and save it to a variable when the textbox is in

Below is a textbox that I am working on: <input type="text" name="company" id="company" required /> I am trying to figure out how to use jQuery to capture the values inside the textbox whenever they are typed or selected. Despite my efforts, I hav ...

javascriptphpjquery

Leverage the specific child's package modules during the execution of the bundle

Project Set Up I have divided my project into 3 npm packages: root, client, and server. Each package contains the specific dependencies it requires; for example, root has build tools, client has react, and server has express. While I understand that this ...

javascriptnode.jstypescriptnpmwebpack

Transforming an array in JavaScript into a JSON object

I'm currently working on creating a loop in JavaScript or jQuery to generate a new JSON object from an array. The goal is to convert an input JavaScript array into a desired format for the output. Here's the input array: INPUT: [ { ...

javascriptarraysjsonfor-loopgrouping

Changing the color of a text box when it is disabled can be achieved through JavaScript

I'm facing an issue with the formatting of my HTML elements. Specifically, I have 2 combo boxes and one text box in which all 3 are disabled. However, when they are disabled, the background color of the text box does not match that of the combo boxes. ...

javascriptjsp

Filter the ng-options by the value in a separate dropdown menu

I am having trouble with this code, even though it seems straightforward. My goal is to filter the 'model' dropdown based on the selected 'make'. Make: <select ng-model="makeng" ng-options="option.display for option in ...

angularjsangular-ngmodelng-options