Selecting a default option in Angular when the value is present and repeated

My goal is to pass a parameter in the URL to a page where a select element is populated dynamically. The parameter that needs to be passed is customerProfile.id. I want to find this id in the select options and have it selected by default. How can I achieve this? I need to check if the customerProfile.id exists and then select the corresponding option. If it doesn't exist, the selection should default to a certain value. The ids are numerical values like 1, 2, 3, etc. Let me know if you require more information.

Below is the code for the select element:

<div class="form-group" id="testpick">
   <label for="field_customerProfile">customerProfile</label>
   <select class="form-control" id="field_customerProfile" name="customerProfile"
     ng-model="rentalAgreement.customerProfile"
     ng-options="customerProfile as customerProfile.lastName for customerProfile in customerprofiles track by customerProfile.id">
      <option value=""></option>
   </select>
</div>

I attempted to set the select option value using AngularJS with '1', which will later be replaced with the actual parameter value.

angular.element('div#testpick select').val('1');

Answer №1

If you only want to store the customer id in the ng-model, simply replace

ng-options="customerProfile ...
with
ng-options="customerProfile.id ...
:

<select class="..." id="..." name="..." ng-model="rentalAgreement.customerProfileId" ng-options="customerProfile.id as customerProfile.lastName for customerProfile in customerprofiles track by customerProfile.id">
    <option value=""></option>
</select>

The goal is to assign the variable linked to ng-model (rentalAgreement.customerProfile) with the customer id from the URL parameter. If the assigned value matches one of the options, the select list will highlight that value. To extract the URL parameter, use $location in the controller and check $location.search():

Controller

If the URL parameter is named customerId:

$scope.rentalAgreement = {
    customerProfileId: $location.search().customerId
}

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

Cross-origin resource sharing (CORS) file uploading in AngularJS, compatible with Internet Explorer

I am looking for a simple and lightweight method to upload a small file to a REST API while utilizing CORS. I currently rely on the angular-file-upload plugin. Unfortunately, a problem arises with this plugin as it utilizes swf fallback for outdated brows ...

Unlocking the API endpoints within nested arrays in a React project

{ [ "quicktype_id": 1, "quicktype": "Laptops", "qucik_details": [ { "type_name": "car", "type_img": "car_img" }, { "type_name": "van", "type_img": ...

Having trouble showing Bootstrap Toasts on my website

I successfully implemented Toast functionality upon button click, but I am facing an issue where I have two buttons and I want a separate Toast to appear for each button click. How can I achieve this? Another problem I encountered is related to the docume ...

How to retrieve text values across various browsers using Vue.js

Whenever I type something in a text box, it displays the text value based on its ID. This code works perfectly when running it on my laptop at http://localhost:8080/. If I open the same website on my phone at http://xxx.xxx.x.xxx:8080/, it shows the same ...

``Are you looking to create multiple canvases in a loop?

I've managed to get this command working exactly as I wanted: http://jsfiddle.net/m1erickson/64BHx/ However, I didn't anticipate how challenging it would be to turn the drawing into reality here: What I attempted to do is illustrated in this li ...

TypeScript interface with an optional parameter that is treated as a required parameter

Within my interface, I have a property that can be optional. In the constructor, I set default values for this property, which are then overridden by values passed in as the first parameter. If no properties are set, the defaults are used. I am looking fo ...

Angular and Laravel API combination for creating a straightforward single page application

I'm looking to develop a straightforward Single Page Application using AngularJS and Laravel 4 as my API backend. The application will consist of basic posts, categories (essentially a blog), and some static pages. My goal is to integrate Laravel&apos ...

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Looking to create an email form in HTML with PHP, but running into the issue of the page reloading after submitting? Many people turn to jQuery and AJAX to solve this problem. While you may have come across solutions on Stack Overflow, as a non-native Engl ...

Ways to stop VoiceOver from selecting the background content when a modal is open

Is there a way to prevent VoiceOver from reading the content behind a modal? I tried using aria-modal=true, but it seems VoiceOver does not support this feature by default like NVDA and JAWS do. I found more information about this on . According to the in ...

Accessing a PHP variable within an AJAX handling script

Upon user login, the email is stored in $email (I also tried global $email). Subsequently, a form allows the user to input their roommate's name to search for existing appointments. Incorporating AJAX $("#reserveAPickupAppointmentForm3").submit (fun ...

Issues with Laravel 8's datatable scripts causing dysfunction

In my practice with the AdminBSB template, I am facing an issue where the Jquery datatable plugin JS is not functioning properly in my blade template. I aim to achieve a datatable layout similar to this example: https://i.sstatic.net/krfPl.jpg However, t ...

Encountering an issue with DateTimeField being undefined in a React.js application

I encountered an issue stating that DateTimeField is not defined while attempting to create a date picker in react + bootstrap. I referred to the following URLs for assistance: https://github.com/Eonasdan/bootstrap-datetimepicker Link to my code s ...

Google Script: How to automatically open a newly created text document after its creation

I decided to try out this script for generating Google text documents from Google Spreadsheet data. However, I noticed that the new text document created from a template is always placed in the default folder. This means that I have to manually locate the ...

Error encountered when attempting to pass a custom component as a prop in VueJS that is undefined

Can you please clarify why Vue is indicating that Unknown custom element: <MyComponent> - did you register the component correctly? is an issue in this code snippet: const CustomComponent = Vue.component('CustomComponent', { template: &a ...

Is it not possible to apply the .includes method on a string within a v-if directive while utilizing a computed property?

Problem I am facing an issue while trying to determine if a string contains a substring within the Vues v-if directive. The error message I receive is: TypeError: $options.language.includes is not a function The technologies I am using are Vue, Vuex, and ...

Configuring headless unit testing with requirejs

Seeking a JavaScript unit testing environment, I feel like I'm on a quest for the Holy Grail. The criteria are as follows: testing Requirejs AMD modules isolating each module by mocking out dependencies ability to test in-browser during development ...

Obtaining the value of an input field in HTML

I am currently working on a text input field that triggers a JavaScript function when a numeric value is entered. <input type="text" value="key" ng-keypress="submit(key)" ng-model="pager.page"/> Controller $scope.submit = function (val) { ...

Discover the seamless process of dynamically adjusting metadata to reflect current state values within the Next.js app directory

Exploring the app directory within Next.js version 13, I came across a change in the official documentation where they have replaced the old head method with metadata. Initially, I thought this feature was only available on page or layout components. Now, ...

Angular Compilation Blocked Due to Circular Dependency Error

Currently, I am utilizing WebStorm as my IDE to work on a personal project that I envision turning into a game in the future. The primary goal of this project is to create an Alpha version that I can showcase to potential employers, as I am actively seekin ...

Optimizing the management of optional post fields in an Express.js application

When creating an endpoint with Express that includes both mandatory and non-mandatory fields in the post request, what is the optimal strategy for handling this? Would it be best to use something like if (field exists in req.body) { set variable } else { ...