Choosing the Standard Option from the Drop-Down Menu

Is there a way to set a default value in the drop-down menu below?

<div hidden id="projectSelected">
    <label style="font-size: medium">Project *</label>
    <select name="projectSelected" id="projectSelectedId" class="form-control" 
        ng-model="request.projectSelectedBarcode" required>
        <option ng-repeat="prj in projectList" value="{{prj.Barcode}}">{{ prj.Name }}</option>
    </select>
    <div style="color:maroon" ng-messages="getServiceReuqestForm.projectSelected.$error"
        ng-if="getServiceReuqestForm.projectSelected.$touched">
        <div ng-message="required">This field is required</div>
    </div>
</div>

In this code snippet, the projectList represents data fetched from an OData call. I am wondering if it's possible to automatically select one of the returned values as the default option in the drop-down list.

Answer №1

To utilize the Barcode values from your Odata responses, consider setting your select's ng-model accordingly.

For example, after fetching Odata values, you might have a structure like this:

$scope.projectList=[
{
    "Name":"project 1",
  "Barcode":"barcode 1"
},
{
    "Name":"project 2",
  "Barcode":"barcode 2"
},
{
    "Name":"project 3",
  "Barcode":"barcode 3"
}];

You could then assign a value to your request object by referencing one of the Barcodes:

$scope.request={
   "projectSelectedBarcode":$scope.projectList[2].Barcode
}

This should effectively set your <select>.

Feel free to check out this JsFiddle for more clarity: https://jsfiddle.net/Freego/p7g2d08g/1/

I hope this solution proves helpful!

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

executing concurrent npm tasks on a Windows operating system

After setting up an npm parallel script in my package.json, I noticed that it works smoothly on a mac but encounters issues when run on windows: "myScript": "nodemon ./server.js & cross-env NODE_ENV=development webpack-dev-server" However, when the s ...

Avoiding Conflict with jQuery

Struggling with this issue has my brain working overtime, so I am reaching out to the online community for assistance. I've been poring over the documentation for jQuery's $.noConflict() function without success. The problem arises from having ...

Transferring temporary information from server to controller using angular-file-upload

Currently, I am utilizing the angular-file-upload library which can be found at this link: https://github.com/danialfarid/angular-file-upload. In the example provided on that page, data from a file is sent to the backend from a controller using the availab ...

Connection Among Angular Modules

I am currently encountering an issue with Dependency Injection between modules. One of my modules implements a directive that I need to utilize in other applications. To incorporate the dependency from this module into another app declaration, I used the ...

What steps can I take to ensure my website is optimized for a seamless viewing experience on all mobile devices

Could you please check out the link on your smartphone and let me know if it looks a bit off to you? I have centered everything and the website looks fine on desktop, but on my iPhone 5S, it doesn't seem to display properly. Is there a way to make it ...

Using Ionic to send a secure HTTP post request

I've been attempting to make a server request using HTTPS POST method in Ionic, but for some reason it fails every time. I'm not sure why this is happening. Is there a correct way to do this? $http({ url: "https://beta.test.com/auth/au ...

Is it possible to integrate applications developed using (JS, Node.js, Express, and MongoDB) into a Wordpress site?

After successfully building projects using JavaScript, Node.js, Express and MongoDB, I am now looking to incorporate them into my existing WordPress website. Is it possible to integrate these projects into WordPress, or would it be better to create a sep ...

Guide to successfully redirecting to a new page post login, along with sending a token as a handler to middleware using the express framework

My application utilizes nextJS, express JS, and JWT. I have created two pages - a login page and an admin page where the latter is protected and only accessible after verifying the token using JWT. My goal is to redirect users to the admin page immediately ...

Exploring the power of React Leaflet and the exciting possibilities of React Leaflet

I'm currently in the process of implementing the draw functions on a leaflet map. I started off by creating a new app with just react-leaflet installed. I used npx create-react-app and installed the following packages: npm install react react-dom lea ...

Creating an .htaccess configuration for implementing html5mode with a RESTful API

After some trial and error, I finally got html5mode to work by adding the following code snippet to my .htaccess file: RewriteEngine On RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] RewriteRule ^ index.ht ...

What is the best way to delete rows from an HTML table?

I am trying to update the table, but every time the setInterval function is triggered, the append method adds the same rows again. I want the old rows to be removed before inserting the new ones. $(document).ready(function() { function updateT ...

Making sure the checkbox stays selected in an angular environment

After experimenting with Angular 9 and a custom input, I achieved the following result => https://stackblitz.com/edit/angular-ivy-rgsatp My goal was to prevent users from disabling a radio button that is currently checked. Therefore, I made changes in ...

JavaScript functions are limited to only being compatible with Mozilla Firefox

A simple JavaScript code was written to display a div based on the user’s selection in a dropdown menu. However, it seems to only work on Firefox and not on Chrome, Safari, or IE. Can someone guide me in the right direction? You can view the complete so ...

Resolving the Conflict Between Jquery and require.js

Exploring the concept of jQuery no conflict, I referred to the explanation provided in this article Using private jquery with RequireJS - issue after optimisation However, upon loading my page with additional configurations like the ones below: ...

Struggling to retrieve JSON data from within an array

[ { "May": [ { "year": 1994, "date": "2" }, { "Sequence": 2, "Type": "Images" } ], "_id": "1122" } ] The issue I am facing is retrieving the id except for the "date" f ...

Obtain the value of a checkbox using jQuery

Here is an example of dynamic checkboxes: <input type="checkbox" checked="checked" value="1" name="user_mail_check[]" class="ami"> <input type="checkbox" checked="checked" value="2" name="user_mail_check[]" class="ami"> <input type="checkbo ...

Receiving no communication from Express Router

Having trouble receiving a response from the server after making get/post requests. I've tried adjusting the order of functions in index.js without success. I also attempted to send a post request using Postman to localhost:8080/register, but the requ ...

Searching for an array of strings in an express.js application

My concern is related to working with an array of strings. The specific situation involves: let search = ["user","country"]; In order to retrieve data from a MySQL database, I am looking to utilize the LIKE operator. An example of wha ...

Extracting a variable established on the client side and passing it to a server-side node backend

I am currently working on creating a comments section for a web application. The front end of the app displays information about the threading level of each comment. When users submit comments, I need to pass this threading information to the back end in o ...

Display hyperlink depending on spinner value

I stumbled upon this JavaScript spinner that displays a countdown feature, which I find quite interesting. The spinner counts down from 15 seconds. I'm curious if it's feasible to customize it so that if you land on a specific category like geogr ...