Setting the select option in AngularJS with predefined options can be easily achieved with

I am encountering an issue with a select element that has predefined options. Even though the select element is using ng-model, when the model is set to one of the option values, it fails to be selected.

Below is the snippet of HTML code:

<select class="modal-textboxes" ng-model="vm.reportPresets.selectedPreset.systemWideAccess">
    <option value=false>User</option>
    <option value=true>System Wide</option>
</select>

Interestingly, when vm.reportPresets.selectedPreset.systemWideAccess is assigned to true or false, the select option does not get highlighted as selected.

javascriptangularjs

Answer №1

It is recommended to utilize the ngValue directive for this scenario.

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', [function() {
      this.systemWideAccess = true;
    }]);

})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller as vm">
    <select class="modal-textboxes" ng-model="vm.systemWideAccess">
        <option ng-value="false">User</option>
        <option ng-value="true">System Wide</option>
    </select>
  </div>
</div>

Answer №2

Maybe instead of setting the systemWideAccess to true, you could consider adding an additional option 

 <select class="modal-textboxes" ng-model="vm.systemWideAccess">
     <option ng-value="">--Select--</option>
     <option ng-value="false">User</option>
     <option ng-value="true">System Wide</option>
 </select>

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

Tag editor assessing the input's width for SO

I've been working on a tag editor similar to Stack Overflow's and it's coming along nicely. The only issue I'm facing is calculating the width of the textbox after a tag has been selected by the user. For each tag added, I try to adjus ...

javascripthtml

Dynamic routing with ngIf in Angular 2's router system

Is there a way to use *ngIf with dynamic router in Angular? Let's say I have a top navigation component with a back button, and I only want the back button to be visible on the route 'item/:id'. I tried using *ngIf="router.url == '/ite ...

javascriptangulartypescriptangular-routing

Is there a way to determine the app bar height within a React Material UI application?

I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...

javascriptcssreactjsmaterial-ui

Error Alert: Vue is not recognized in Browserify environment

My venture into front-end development has just begun and I am experimenting with Vue.js along with Browserify. The main 'app.js' file includes: window.$ = window.jQuery = require('jquery'); require('bootstrap'); var moment = ...

javascriptbrowserify

How to use Angular pipes to format dates as Long Dates in the template

Suppose I have a date input such as 2022-04-02T00:00:00. When I utilize {{data?.dateStarted | date:'MM/dd/YYYY'}}, the result will be 04/02/2022. But how can we transform it into a Long Date format like April 2, 2022? Does anyone have any sugges ...

javascriptangulartypescript

Cordova encountered an error: Execution of inline script was denied due to violation of Content Security Policy directive

As I delve into the world of Cordova and jquery mobile, I encountered a perplexing error that reads: Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: 'un ...

javascriptjqueryhtmlnode.jscordova

Using database entries to generate dynamic routes in express.js without the need for a server restart

I have created a custom Express instance for my KeystoneJS v5 app that serves data stored in a Postgres database with the following model: CREATE TABLE "Link" ( id integer DEFAULT PRIMARY KEY, customer text, slug text ); I've set up dyna ...

javascriptnode.jsexpresskeystonejs

Show input field depending on chosen option

I'm looking to create a dynamic form where specific input fields are displayed based on the selection made in another field. For example, if "gender: male" is selected, the input field for "blue" should appear, and if "gender: female" is selected, the ...

javascriptjqueryhtmlajax

What is the best way to call an API within a loop using Node.js?

How can I efficiently make API calls based on page numbers in a loop? I am using the request() function for API calling, but when debugging my code, the response block is not reached and I do not get a response. Can someone please provide guidance on how ...

javascriptnode.js

Why is the abort function in JavaScript important?

What possible scenarios would require me to utilize this feature? ...

javascriptajax

I seem to be struggling with hiding/showing a div element. Can you figure

I am in the process of creating a gallery that will display a div with images when a button is clicked. The issue I am facing is that when I have two buttons, only the last images are clickable. It's a bit difficult to explain, but you can see it in ...

javascripthtmlcss

Switching the website address after picking an option from the drop-down menu

I have an HTML form that includes two dropdown menus. The first dropdown is populated from a database using PHP, and the second dropdown is linked to the first one and uses AJAX to update its values based on the selection from the first dropdown. My goal ...

javascriptphpjqueryhtmlajax

What are the advantages of passing state from child components up in React?

I have been attempting to update the state within the App component from a child component, but I am concerned that this approach may cause issues later in my application. I've experimented with passing down the setFunction to the child components an ...

javascriptreactjsreact-hooksfrontend

Challenging multiple layers of ng-repeat

https://jsfiddle.net/n4qq4vxh/97/ As part of my project, I am creating tables that describe the packages selected when customizing a car. The dark grey represents the entire package, such as the luxury package, while the lighter grey indicates the items c ...

angularjsangularjs-scope

Personalized dropdown appearance

During my work on a select box, I discovered that custom styling is not possible. I attempted to use some plugins but did not find one that met my needs. I am seeking a dropdown menu with options in both black and gray, similar to this template but using ...

javascriptjqueryhtmlcss

Searching for a pattern and replacing it with a specific value using JavaScript

I need to find all occurrences of an unknown string within a larger string that is enclosed in brackets. For example, the string may look like: '[bla] asf bla qwr bla' where bla is the unknown string I need to locate. Is it possible to achieve th ...

javascriptnode.jsregexregex-lookarounds

HTML5 Mouse Canvas

Here's a simple example of what's happening: function handleClick(event) { ... } canvas.addEventListener("click", handleClick, false); function drawRectangle(x, y) { context.fillRect(x, y, 16, 16); }; ...

javascripthtmlcanvas

What is the best way to implement a custom layout with nuxt-property-decorator?

Summary of Different Header Components in Nuxt In order to set a different header component for a specific page in Nuxt, you can create separate layout files. layout ├ default.vue // <- common header └ custom.vue // <- special header for s ...

javascripttypescriptvue.jsvuejs2nuxt.js

Validation of Selenium in the Node.js Environment

I have a block of code that is meant to verify if an element exists on the page and display a message accordingly. However, I am struggling to correctly check my elements. Should I use an object or an array for this task? And how can I check multiple value ...

javascriptnode.jsselenium

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...

javascripthtml