Encountering difficulty in assigning the desired value to the select box

// updating the subType value in the controller

$scope.newEngagement.subType = 3;

// creating a list of engagement subTypes
$scope.engagementSubTypeList = [ 
{ "subTypeId": 1, "subTypeName": "value1" }, 
{ "subTypeId": 2, "subTypeName": "value2" },  
{ "subTypeId": 3, "subTypeName": "value3" }, 
{ "subTypeId": 4, "subTypeName": "value4" },
];
<div class="col s12 m12 margin-top-2x" ng-show="isSubType">
        <label class="uppercase blue-grey-text text-darken-5 font-1-5x clear left">SELECT SUB TYPE </label>
        <select
                name="engagement_subtype"
                id="engagement_subtype"
                ng-model="newEngagement.subType"
                class="browser-default margin-top-x col s12 m8 clear">
            <option value="{{subTypeList.subTypeId}}"
                    selected="subTypeList.subTypeId == newEngagement.subType"
                    ng-repeat="subTypeList in engagementSubTypeList track by subTypeList.subTypeId ">
                {{subTypeList.subTypeName}}
            </option>
        </select>
    </div>

Although the code specifies that "value3" should be selected, it doesn't work as expected due to the materialize select box browser default class being used.

javascriptangularjsmaterialize

Answer №1

If you want to give it a shot, you can use the ng-options and set the value of newEngagement.subType from your $scope.engagementSubTypeList as shown below. It should do the trick.

<div class="">
    <label class="uppercase">SELECT SUB TYPE </label>
    <select ng-options="subTypeList.subTypeId as subTypeList.subTypeName for subTypeList in engagementSubTypeList" ng-model="newEngagement.subType">
      <option value="">Select One</option>
    </select>
  </div>

And for the controller:

$scope.engagementSubTypeList = [ 
{ "subTypeId": 1, "subTypeName": "value1" }, 
{ "subTypeId": 2, "subTypeName": "value2" },  
{ "subTypeId": 3, "subTypeName": "value3" }, 
{ "subTypeId": 4, "subTypeName": "value4" },
];

$scope.newEngagement = {};
$scope.newEngagement.subType = $scope.engagementSubTypeList[2].subTypeId;

Answer №2

Feel free to utilize the code snippet below:

<div class="col s12 m12 margin-top-2x">
<label class="uppercase blue-grey-text text-darken-5 font-1-5x clear left">SELECT SUB TYPE </label>
<select
name="engagement_subtype"
id="engagement_subtype"
ng-model="newEngagement.subType"
class="browser-default margin-top-x col s12 m8 clear">
<option value="{{subTypeList.subTypeId}}"
ng-selected="{{newEngagement.subType == subTypeList.subTypeId}}"
ng-repeat="subTypeList in engagementSubTypeList track by subTypeList.subTypeId ">
{{subTypeList.subTypeName}}
</option>
</select>
</div>

$scope.newEngagement = {};
$scope.newEngagement.subType = 2;//{"subTypeId":3};

$scope.engagementSubTypeList = [ 
{ "subTypeId": 1, "subTypeName": "value1" }, 
{ "subTypeId": 2, "subTypeName": "value2" },  
{ "subTypeId": 3, "subTypeName": "value3" }, 
{ "subTypeId": 4, "subTypeName": "value4" },
];

Check out a demo here

In order to enhance efficiency, I recommend refraining from using ng-repeat in the selection option. Instead, consider utilizing ng-option, as it is the recommended approach in AngularJS.

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 showing various images from a server using ng-repeat

Is it possible to display different images from a server using AngularJS? I have ng-repeat set up for posts and for each post, I want to retrieve its avatar. My approach is to call a function getImage(post.author.id) to fetch the corresponding avatar. $ ...

javascriptangularjshtmlcordova

Looking to remove a task from an array of objects with the help of Sequelize?

I am facing an issue with updating my task array in the database using Sequelize. Despite finding the index of the task to be deleted and updating the tasks array, the changes are not reflected in the database. Below is my code snippet: var idx = 0; for ...

javascriptnode.jspostgresqlsequelize.js

Retrieving an HTML element that has been added through DOM manipulation

After successfully creating a Jquery function that inserts a 'save button' into the page when a specific button is clicked, I encountered an issue with another function meant to be activated when the save button is clicked. The first function see ...

javascriptjqueryhtmldom-manipulation

The jQuery UI Datepicker does not seem to be functioning properly within the Angular JS UI Bootstrap modal

I am facing an issue where I can't seem to open the jQuery UI Date Picker in UI Bootstrap Model. The normal HTML date picker works fine, but the jQuery Date Picker does not open up. Below is the code snippet: Test.html <!DOCTYPE html> <html ...

jqueryangularjsangular-ui-bootstrapbootstrap-modaljquery-ui-datepicker

Encountering the error message "Module 'request' not found" despite the fact that I've already included the request module

I'm currently facing an issue with my Cloud Function that involves using the request library. After installing the request package using npm install request, I noticed it's located in the node_modules directory, just like all the other packages: ...

javascriptnode.jsnpmgoogle-cloud-functions

Guide on creating a function that accepts an Array of strings as a parameter and displays the initial letter of each element individually on separate lines

I am currently tackling my initial JavaScript assignment which involves the task of creating a function that accepts an array of strings as its parameter and outputs the first letter of each element individually on separate lines. The unique requirement ...

javascriptarraysfunctioncharatfor-of-loop

JavaScript Promise Fundamentals

While I am quite familiar with coding in JavaScript, the benefits of promises in the JS world still seem somewhat unclear to me. Below is an example of asynchronous calls using callbacks nested within each other. (function doWorkOldSchool() { setTime ...

javascriptpromise

What is the method for obtaining a dynamic route path within the pages directory in Next.js?

In my code, I have a special Layout component that compares routing queries and displays the appropriate layout based on the query. I'm looking to extend this functionality to handle dynamic routing scenarios, such as invoices/invoice-1. Currently, ...

javascriptroutesnext.js

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...

javascriptjquerycss

Encountering a 404 error when attempting to access static files within a directory using Express Js

Organizing my static files has been a breeze with multiple directories. I have some static files in the client directory, while dashboard-related files are nested within the src directory. Here is how my directory structure looks: / | client //housing sta ...

javascriptangularjsexpressrouteshttp-status-code-404

Guide on utilizing Vercel KV for storing and fetching posts from an API

Looking to optimize your API by utilizing Vercel KV for storing and retrieving posts? If you have a basic node.js express API that pulls random posts from MongoDB, the process of integrating Vercel KV can enhance performance. Initially, the API will resp ...

javascriptnode.jsmongodbvercel

A guide to retrieving JSON data with Javascript

I'm in the process of building a small website for weather forecasting. However, I've encountered an issue when trying to retrieve JSON data from accuWeather - I'm not getting any response. I've double-checked my request and it seems to ...

javascriptjsonxmlhttprequest

AngularJS encountering unresponsive resources

When setting up my Angular App, I include various resources like this: angular.module('myApp', ['infinite-scroll', 'chieffancypants.loadingBar', 'ngResource']) Next, in the html file: <script type="text/javascr ...

javascriptangularjs

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

javascriptphphtmlforms

How can one determine when an animation in Three.js has reached its conclusion?

When I write code like this: function renderuj(){ scene.renderer.setClearColor(0xeeeeee, 1); ob1.animation.update(0.5); ob2.animation.update(0.5); scene.renderer.render(scene.scene, scene.camera); animationFram = reques ...

javascriptthree.js

Tips for iterating through a nested object in JavaScript with the forEach method

Here is my answer to the query. In this snippet, results represents a freshly initialized array. The object address nests within the user object. response.data.forEach(user => { results.push({ id: user.id, name: user.n ...

javascriptvue.jsforeachvuejs2

ng-repeat hide all elements except the first one

Hello there! I'm currently working on rendering a form based on an API call. Using a couple of filters, I am able to hide all elements that have 'id' in the title and which equal 0. However, I do need to display the initial element Id. I tho ...

javascriptangularjsforms

Transfering information to handlebars in node.js

Being a beginner in node.js, I am currently working on making a get request in my router (index.js). After successfully obtaining the desired result (verified by logging it in console.log), I proceed to parse it into a JSON object and pass it to a render f ...

javascriptjsonnode.js

Modify the base URL with JavaScript

Is it possible to dynamically change the href using JavaScript? I attempted to make this change with the code below in my HTML file, but unfortunately, it didn't work: <base href="/" /> <script type="text/javascript"> function setbasehr ...

javascripthtml

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

javascriptphpjqueryhtml