Assign a custom value to the ng-options and ensure that the first option is selected by default

Hey there, I'm currently working on the following:

$scope.test = [
        {"value" : 0,    "text" : "00:00"},
        {"value" : 900,  "text" : "00:15"},
        {"value" : 1800, "text" : "00:30"}
    ];

and in my select element, this is what I have:

<select ng-model="monday.morning" ng-options="obj.value as obj.text for obj in test">

which gives me the following options:

<select ng-model="monday.morning" ng-options="obj.value as obj.text for obj in test">
    <option value="?" selected="selected"></option>
    <option value="0">00:00</option>
    <option value="1">00:15</option>
    <option value="2">00:30</option>
</select>

My goal is to match the values from the JSON array with the option values and have the first one selected. Can it be achieved like below?

<select ng-model="monday.morning" ng-options="obj.value as obj.text for obj in test">
    <option value="0" selected="selected">00:00</option>
    <option value="900">00:15</option>
    <option value="1800">00:30</option>
</select>

Essentially, making sure the option values match those in the 'test' array.

Answer №1

You can easily assign a value by setting the model monday.morning to one of the elements in your select array.

Here is an example:

$scope.monday.morning = $scope.test[1];

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

Tips for preventing HTTP Status 415 when sending an ajax request to the server

I am struggling with an AJAX call that should be returning a JSON document function fetchData() { $.ajax({ url: '/x', type: 'GET', data: "json", success: function (data) { // code is miss ...

Exploring the internet with selenium

I'm currently facing difficulties navigating a website for information scraping with Selenium. The issue lies in the site's use of ng-click to update a table, requiring me to activate different tabs on the page in order to access the desired data ...

Retrieving JSON data from a URL with PHP

Attempting to retrieve JSON data from the following URL: $search_data&format=json&nojsoncallback=1 The information I am aiming to obtain based on the above link is as follows: { "places": { "place": [ { ...

Error: The function $.getScript(...).done cannot be found

Encountered a strange situation here.. . The following code is functioning properly: // this code working perfectly $.getScript( "https://wchat.freshchat.com/js/widget.js" ).done(( script, textStatus )=>{ // run something }); . . However, if ...

Taking out the z-index from the transition code

Is there a way to restructure the code without needing to use z-index for the transition? Without z-index: https://jsfiddle.net/Legcb42d/ .container1 { position: relative; width: 100%; height: 100%; } .container1.slide { height: auto; min-heigh ...

unexpected issue when trying to append a child element after creating its innerHTML

Upon executing this script, I expect to see the initially empty div with id="checkboxes" transformed into: <div id="checkboxes"> <label><input type="checkbox">option1</label> <label><input type="checkbox">opt ...

Can you explain the distinction between the controls and get methods used with the FormGroup object?

I have encountered an interesting issue with 2 lines of code that essentially achieve the same outcome: this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value; this.data.affiliateLinkUrl = this.bookLinkForm.get(' ...

The function highcharts() is not defined for $("#highcharts-2i5ujpv-2")

I'm working on an AngularJS application and using highcharts-ng version 0.0.86 to generate a highchart with the following code: <highchart config="highchartsNg"></highchart> The chart is being generated successfully with the dyn ...

Personalize the loading bar using JavaScript

Currently, I am utilizing a basic progress bar from Bootstrap. However, I have the desire to design a custom progress bar similar to this: Unfortunately, I am uncertain about how to create such a unique progress bar. Perhaps there is an existing JavaScri ...

Retrieve the AJAX response, concatenate the data, and construct a dynamic table

I am facing an issue with assigning my AJAX return as a variable to concatenate. Here is the sample code: function FetchSex() { $.ajax({ url: '/SEX/GetAllSex/', success: function (responseDat ...

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

Currently working on a website project that involves accessing and manipulating the display property of a menu. The goal is to toggle the menu open or closed based on its current state. In my setup, the initial state of the menu is defined as closed using ...

The NextJS API is throwing an error due to a mysterious column being referenced in

I am currently in the process of developing an API that is designed to extract data from a MySQL table based on a specific category. The code snippet below represents my current implementation: import { sql_query } from "../../../lib/db" export ...

Is the image overlay experiencing a flickering issue?

Last time, none of the solutions seemed to work quite right with the project, so let me try asking the question in a slightly different way this time. Basically, I have an image that, when someone hovers their mouse cursor over it, a div appears (containi ...

The script fails to load when utilizing jquery/ajax

After the page loads, I am attempting to dynamically add a script into a div using ajax/jquery. This particular script is sourced from a CPM network and is responsible for loading a banner. However, when I try to load this script through ajax post-page lo ...

the intricacies of resizing a dijit dialog

My dialog is defined as shown below: <div data-dojo-type="dijit/Dialog" id="DetailDialog" class="dijitDialog" ... I have loaded a grid inside the dialog with 10 columns. var dialog = dijit.byId("DetailDialog"); dialog.set("content", this.Details); d ...

Configuring the text box to utilize jQuery's datepicker feature

Currently, I am facing an issue with setting up a datepicker in a dynamic control creation scenario. The control is being created on the fly, causing inconsistencies with the id, which in turn is preventing the datepicker from functioning properly. Here is ...

Is it obligatory to reply with status code 200 in Express?

Is it required to explicitly include a status 200 code in the response or is it set automatically? response.json({ status: 'OK', }); vs. response .status(200) .json({ status: 'OK', }); Upon testing the route in my browser, ...

Tips on customizing the appearance of JavaScript output?

I recently created a plugin for my website with JavaScript, and one of the lines of code I used was output.innerHTML = "Test"; Is it possible to apply CSS styles to this element, or is there an alternative method? ...

Accessing the current instance in Vue when triggered by a checkbox event

Recently, I tested out a to-do-list application built in Vue that has a checkbox feature to mark completed items. I'm looking for a way to access the current instance from the checkbox event. Here's what I've accomplished so far: myObject ...

The React task list updates the todo items on change, rather than on submission

As a newcomer to React, I have embarked on the classic journey of building a todo app to learn the ropes. Everything seems to be functioning smoothly except for one minor hiccup: When I input a new todo and hit "submit", it does get added to my array but d ...