How to use Angularjs to designate an active item in a select list

Check out this list I have:

https://i.sstatic.net/NPZ1V.png

It is generated by this code snippet:

 <select multiple size=11 ng-model="AvailableColumns" ng-show="NamesAvailable" ng-options="item for item in names">
                                    </select>

Here is the array used:

$scope.names = ["Device Name", "Description", "Device ID", "Update Required", "Open Time", "Open Time Ada", "Opening Mode", "Timed Period Stable Id", "Automatic Change Stable Id", "Keypad Code", "Battery Status", "Last Updated"];

I am curious about how to select a specific item in the code. For instance, if I want to choose 'Open Time', how can I achieve this using AngularJS?

javascriptarraysangularjsangularjs-scope

Answer №1

If you have a multiple selection, then the default value should be an array instead of a single value.

For example:

$scope.AvailableColumns = ['Open Time Ada'];

Alternatively, you can use the array position (which would be necessary if you switch the options to an object instead of a simple string array):

$scope.AvailableColumns = [$scope.names[5]];

Therefore, you have the option to specify multiple items to be selected by default.

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

Can pins be added or removed from a location plan (image or vector) using either Javascript or the DevExpress library?

At the factory where I am employed, there are close to 1000 cameras in operation. I have requested to have the locations of these cameras marked on a non-geographical map of the factory. By simply clicking on one of the camera icons, it should be possible ...

javascriptc#asp.net-mvcdevexpress

A guide to examining pixels in Three.js

I have a query about comparing two textures at a pixel level in three.js. I am unsure of how to achieve this as the documentation for Three.js does not provide clear answers, with some classes remaining undocumented. In summary, I am looking to determine ...

javascriptthree.jswebgl

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

javascriptjqueryhtmlcss

Custom objects do not return true for Symbol.hasInstance

The TypeScript playground encounters an issue with the Symbol.hasInstance built-in symbol, while it functions properly for other symbols. Testing other symbol methods such as Symbol.match and Symbol.replace show no problems, but Symbol.hasInstance is not ...

arraystypescriptsymbols

Is it possible that the method of wrapping options using an array is not functioning correctly in the quiz app being managed in React?

I need your help in figuring out where I've made a mistake. The following line is causing an error: const choices = Array.forms(document.querySelectorAll('.choice')); console.log(choices); ...

javascriptreactjs

What steps can be taken to establish an array type that is limited to predefined values?

I am currently working on defining a type for an array that requires specific values to be present in a certain order at the beginning of the array. type SpecificArray = ('hello'|'goodbye'|string)[] // Current const myArray: SpecificAr ...

arraystypescripttypes

Establish a route nickname for files outside the project directory

I'm currently tackling a project that is divided into multiple angular projects. Within these projects, there are some services that are shared. Is there a way for me to incorporate these services into my project without encountering errors? /root / ...

javascriptangulartypescript

JavaScript script that parses innerHTML

Does the behavior of element.innerHTML = '<script>alert()</script>'; differ across browsers? Can I consistently expect innerHTML to not parse scripts? ...

javascripthtml

Disable the border and background colors in CloudFlare Turnstile

I have implemented the CloudFlare reCaptcha Turnstile and I am looking to modify the widget by removing the border and background color. I believe this customization can be achieved using CSS or Javascript. Thank you for any assistance! ...

javascriptcssrecaptchacloudflare

Display personalized error messages using jQuery and PHP

I implemented an Ajax autocomplete feature on an input field within a form using jQuery. Here are the ajax settings I have set up: $.ajax({ type: "POST", url: myUrl, data: $("#id__form").serialize(), success: function(data){ ...

javascriptphpjqueryajaxerror-handling

Python code that converts a NumPy array into a string representation

Is there a way to obtain the complete string representation of a 2D float32 array with dimensions 512x512? Currently, when using either numpy's string2array(array) or repr(array), I only get a truncated output like this: '...[2.0886018e-04 1.702 ...

pythonarraysstringnumpy

I encountered an error with no matching overload when attempting to make a call using the Tanstack query function

While I was successfully calling a single data in my database using the useEffect hook, now I am attempting to learn how to use tanstack@query. Unfortunately, I encountered an error when trying to call it. No overload matches this call. Overload 1 of 3, ...

javascriptreactjsnext.js

Node.js: Troubleshooting a forEach Function Error

I am encountering an issue with my nodejs script that is causing a "function not found" error after trying to insert data from json files into Firestore. How can I resolve this? Thank you for your help. Below is my code snippet: var admin = require("f ...

javascriptnode.jsfirebase

The service worker is sending out a pair of requests

I have successfully set up a service worker to cache all requests for offline use, but I am experiencing a problem. Every time I load a page, two requests are hitting my webserver: one from the service worker and one from the browser! How can I cache the ...

javascriptprogressive-web-apps

React is unable to identify the `justifyContent` property on a HTML element

const anotherStyle = makeStyles((theme) => ({ container:{ margin: 10, textAlign: 'center', display: 'flex', }, })); return ( <Container className={anotherStyle.container}> <div className={classes.ro ...

javascriptreactjsmaterial-ui

Using Jquery to Switch Pages

Recently, I've been experimenting with using hashes to create animated transitions between pages. Interestingly, the first page that loads (the home page) fades in and out seamlessly. However, when I attempt to navigate to another page, specifically t ...

javascriptjqueryhtmlcss

An array in JSON format containing only one element

I am currently working on a project that involves JSON format output. I am in need of some clarity regarding the structure of JSON arrays. Specifically, I'm curious about how to handle fields that allow multiple entries in an array format. In cases wh ...

javascriptarraysjson

Guide for setting up filtering and sorting on a multi-value array column with MUI's data grid

I've encountered an issue with the MUI Data Grid component's free version, specifically regarding filtering and sorting on a column that displays multiple values in an array. The problematic column in this case is 'tags', which showcase ...

reactjsarraystypescriptmaterial-uidatagrid

Choosing to collapse a nested JSON arrangement in a targeted manner

Facing a challenging problem here and feeling clueless on how to tackle it. Any guidance or pointer in the right direction would be highly appreciated. My dataset looks like this: data = { "agg": { "agg1": [ { "keyWeWant": " ...

javascriptpythonjsonelasticsearchclojure

Exploring the integration of ng-csv with Firebase data in an AngularJS project

Seeking assistance with ng-csv functionality to enable users to download a .csv file by clicking a button. The data is stored in Firebase, and I have a function that retrieves the necessary information as an array. However, it seems that upon button click, ...

angularjscsvfirebase