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

Create a separate folder for templates within Angular to serve as the functional equivalent of a views folder

When attempting to use the ERB template in my Angular templates folder, I am encountering some limitations. For example, using <% link_to %> works fine, but when trying to utilize devise methods or even raw('sdmdslkc'), an error is triggered i ...

ruby-on-rails-3angularjs

Make an element in jQuery draggable but always within the viewport

My issue is that when I resize the window, the element stays in its position until I start dragging it. Once I drag it and then resize the window again, it doesn't stay within its container. To better illustrate my problem, you can view a demo on Fid ...

javascriptjqueryhtmlcssjquery-ui

Acquiring the specific checkbox value using JQuery

I am encountering an issue with my JQuery function that is supposed to print out the unique value assigned to each checkbox when clicked. Instead of displaying the correct values, it only prints out '1'. Each checkbox is assigned an item.id based ...

javascriptjqueryruby-on-railscheckbox

Instructions for capturing multi-dimensional arrays using forms in Vue

I have a snippet of code that looks like this: <div class="form-item"> <label for="list-0"><?php _e('List 0', 'test'); ?></label> <input name="list[0]" type="text" id="list-0" value=""> </div> &l ...

javascripthtmlformsvue.js

Tips for automatically closing a dropdown menu when it loses focus

I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...

javascriptjquerycsstailwind-cssdropdown

What is the best way to display a webpage within an iOS app using PhoneGap?

In my iOS phonegap app, I am looking to have a single view that displays a web page. Can someone guide me on how to load this specific view with a particular URL using JavaScript? Although I primarily develop native iOS applications and do not have expert ...

javascripthtmliosurlcordova

Error: 'require' is not recognized as a valid command - Node.js

I recently attempted to integrate the d3-gauge plugin into a basic node.js/express server. Following the default directory structure generated by Express, I organized the files from the 'example' folder as follows: . ├── app.js ├── b ...

javascriptnode.jsexpress

Exploring the world of MVC4: Enhancing user experience with client-side

Solution: The answer provided by @www.innovacall.com is correct, I initially misunderstood it but now it works perfectly. Thank you for the help. Initial issue: I have been struggling with finding a solution to my problem. In my project, there is a mod ...

javascriptjqueryajaxasp.net-mvc-4twitter-bootstrap

executing a controller method in AngularJS

Looking to trigger a controller function from a directive tag. Check out this demo: https://jsfiddle.net/6qqfv61k/ When the 'Export to Excel' button is clicked, I need to call the dataToExport() function from appCtrl since the data is ready for ...

htmlangularjstwitter-bootstrap

What is the best way to delete a property from an object in an array using Mongoose? This is crucial!

Doc - const array = [ { user: new ObjectId("627913922ae9a8cb7a368326"), name: 'Name1', balance: 0, _id: new ObjectId("627913a92ae9a8cb7a36832e") }, { user: new ObjectId("6278b20657cadb3b9a62a50e"), name: 'Name ...

javascriptnode.jsarraysmongodbmongoose

The attribute interface overload in Typescript is an important concept to

Consider a scenario where there are multiple payload options available: interface IOne { type: 'One', payload: { name: string, age: number } } interface ITwo { type: 'Two', payload: string } declare type TBoth = IOne ...

javascriptnode.jstypescript

Performance of obtaining image data

Is anyone else experiencing a significant lag when trying to retrieve the state of a single pixel on the canvas? Take a look at my JS code below: var state = ctx.getImageData(x,y,1,1).data; state = 'rgba(' + state[0] + ',' + state[1] ...

javascripthtml5-canvas

Is it possible to create nested states or views for layout with a leftbar using ui-router?

In my current layout, the Sidebar and Headerbar will always be displayed with context-specific content. I see two possible options for organizing this: nested states (sidenav > Headerbar > Content) or using views. However, I am having trouble understanding ...

angularjsangular-ui-router

Is there a Webpack plugin available that can analyze the usage of a function exported in a static

Just to clarify, I am presenting this theoretical scenario on purpose, as it reflects a genuine issue that I need to solve and am uncertain if it's feasible. Imagine I have a JavaScript package named road-fetcher, containing a function called find wh ...

javascriptnode.jswebpackoptimizationstatic-analysis

How does Angular handle the output from a parser and formatter function?

I'm feeling quite baffled about what should be returned in a parser function and a formatter function on an ngModel controller. I understand that when a value is invalid, you return undefined in the parser function, otherwise you return the valid val ...

angularjsangularjs-directive

What are some strategies for postponing the execution of a basic function for an

Whenever I develop microservices, I often come across situations where one function contains multiple other functions. For instance: functionA(); functionB(); functionC(); return json({status: processed}); All the functions within this block are synchro ...

javascriptnode.js

Discovering the method to access a local function within a static function in Javascript ES6 (ES2015) or Typescript

Is there a way to access the non-static "foo2" method from inside the static "bar" method? So far, I'm only able to access the "foo1" and "foo3" methods. Can anyone provide guidance on how to achieve this? let foo1 = () => { alert('foo1†...

javascripttypescriptecmascript-6

"Efficient Ways to Manage Various File Types in React: xlsx, pptx, doc, docx

I am encountering an issue with downloading files in my React application. The API is functioning properly as confirmed using Postman, where different file formats such as xlsx, pptx, doc, docx, ppt and xls can be downloaded and opened successfully. Howev ...

javascriptreactjsnpmdownload

Set up specific vue.config.js configurations for unique environments in Vue

I am working on a multi-page app where I want certain pages to only show up in my development environment. Here's how my vue.config.js looks: module.exports = { productionSourceMap: false, pages: { index: "src/main.js", admin: { ...

javascriptvue.js

Searching for all choices within a select dropdown using Selenium and Python

There's a website called noveltop (.net) that hosts web novels, and on each chapter page, there is a dropdown menu where you can select the chapter you want to jump to. I've been using Selenium with Python and the Firefox (or Chrome) driver to e ...

javascriptpythonhtmlselenium