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

You have exceeded the maximum number of Facebook application requests allowed (#4)

My goal is to create a dynamic "social wall" on a website by pulling posts from a specific Facebook page using the Facebook API. Instead of utilizing any Facebook SDK, I am making cURL calls with the URLs directly. To fetch the posts, I rely on Javascript ...

Angular App Failing to Validate Session Cookie 'sessionId' in AuthGuard

Encountering a perplexing issue with my Angular application where the AuthGuard fails to recognize a session cookie named 'sessionId' correctly. I have successfully implemented user authentication, and the expected behavior is for users to be dir ...

Ensure that a synchronous action is performed prior to each Backbone HTTP request

For each authenticated request (GET, POST, etc) in my Backbone/Marionette application, it is necessary to include an accessToken. The accessToken and expireDate are stored in the localStorage. To verify if the accessToken has expired, I utilize the metho ...

Detecting When an Input has an :invalid Selector in Jquery

Here is the code snippet I am currently working with: HTML <input type="text" data-value="1" data-type="input-records" placeholder="Value" pattern="\d{1,4}$" /> CSS input[type=text]:invalid { background-color: red; } Javascript $("[data-ty ...

What is the best way to incorporate an AppBar featuring a Back to Top button from Material UI for React into my application?

While exploring the Material UI documentation, I came across this interesting code snippet: import React from 'react'; import PropTypes from 'prop-types'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from &ap ...

Having trouble vertically aligning text? Combining AngularJS, Bootstrap, and Flexbox can help!

I have spent a lot of time trying to understand why I am unable to vertically align the text inside these cells. I have tried multiple solutions: align-items: center; vertical-align: middle; justify-content: center; justify-items: center; Unfortunately, ...

Altering CSS styles through JavaScript or jQuery

Exploring Options After investigating the use of .css() to manipulate CSS properties of specific elements, I came across a website showcasing the following CSS: body, table td, select { font-family: Arial Unicode MS, Arial, sans-serif; font-size: ...

Issue persists: Ajax functionality remains nonfunctional, prompting the need for

My goal is to use the post input, and upon hitting enter, I want to dynamically replace <div id="mainPagePosts"></div> with new data without causing a page refresh. However, even after submitting the post, the page still refreshes, although I d ...

Background image fixed with scrolling effect

I've been struggling with a parallax effect on my website. After seeing it work smoothly on other websites, I tried to implement it myself but couldn't quite get it right. The background image keeps moving when I scroll the page and I want it to ...

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Hey there, I'm currently working on an Image Gallery project. I have arranged thumbnails horizontally in a div below the main images. Take a look at this snapshot img. My goal is to have the thumbnails scroll along with the main pictures as the user ...

Is it possible to set environment variables in Next.js outside of the pages directory?

Are there alternative methods for setting environment variables outside of a pages directory in NextJS? I have a utility function that defines the base API route in one centralized location. However, since this is a utility function and not associated with ...

Combining Gulp and Bower seamlessly with Django to enhance AngularJS functionality

I'm a beginner in Django and I'm trying to set up an AngularJS template with Django. The AngularJS template I am using has gulp configuration. Can someone please guide me on how to configure gulp with Django to run the AngularJS template? Any sug ...

In the controller file, I plan to utilize a global variable for storing the user's session, ensuring it is securely saved for reference

In my web application about courses, I am faced with the challenge of saving a user's username throughout their session and then storing their progress in the database after completing a course. Instead of repeatedly asking the user to input their use ...

What is the method for activating the on collapse event with a bootstrap navbar?

I am encountering a common issue with collapsing the navbar on smaller screens and triggering an event when the collapse button icon is clicked. Despite my efforts to find a solution, I have been unsuccessful in using the following JavaScript code: $(&apos ...

The XML information vanished during the transformation into JSON format

After converting XML to JSON using multiple conversion libraries, I noticed that the property name attributes and Item name attributes were lost. Why is this happening? Does anyone have suggestions on how I can modify my XML to make it more compatible for ...

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

When using $state.go in $stateChangeStart, there is a dual state transition in ui-router

Take a look at my Plunker. When you click on the profile link and examine the list of state changes: stateChanges = [ " -> home", "home -> profile", "home -> signIn", "signIn -> signIn" ] You'll notice an unexpected extra state c ...

Using the getElementById function in javascript to modify CSS properties

Here is the setup I am working with: <div id="admin"> This element has the following style applied to it: display: none; I am attempting to change the display property when a button is pressed by defining and utilizing the following JavaScript co ...

What is the best way to show nested objects in JavaScript?

let paragraph = document.createElement('p'); document.body.appendChild(paragraph) const fruit = { type: 'Apple', properties: { color: 'Green', price: { bulk: '$3/kg', smallQty: '$4/kg' ...

PHP enables users to look at manual values in columns and MySQL values row by row

I have created a PHP program to organize seating arrangements for an exam hall. The user manually inputs the names of the halls, which should be displayed in columns in a table. The register numbers are fetched from a MySQL database and should be displayed ...