Utilizing Angular's ng-options to cycle through a numerical array in order to showcase the contents of a separate array, with the index selected being stored in

Is there a way to create a dropdown list that displays items from a string Array and sets the ng-model as the index of the selected item?

I understand if my description is not clear, so here is what I am trying to achieve.

HTML

<select ng-model="chosenPropertyIndex"
                 ng-options="arrayProperties.PropertyNames[idx] for idx in [0,1,2,3,4,5]"
        ></select>

Controller

 $scope.chosenPropertyIndex = 0;

 $scope.arrayProperties = [
    "Property A",
    "Property B",
    "Property C",
    "Property D",
    "Property E",
    "Property F"
 ];

If you have any suggestions on how to implement this, please let me know.

Answer №1

Give this a shot:

<select ng-model="selectedPropertyIndex" ng-options="arrayProperties.indexOf(value) as value for value in arrayProperties"></select>

http://jsfiddle.net/680x5grc/

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

Transform the information sent from the server into a user-friendly interface using typescript on the frontend

Received data from the backend looks like this: id: number; user_id: number; car_brand: string; car_model: string; vin: string; equipment: string; reg_number: string; car_mileage: number; car_year: string; Meanwhile, the interface in the ...

How can I stop DOM removal in Angular 2 RC5?

Encountering difficulties with Angular 2 on touch devices is a common issue. Specifically, when a Component is rendered via NgFor and is dragged on the screen using touch. The problem arises when a re-render of the NgFor happens during a touch drag, causin ...

What is the best way to obscure a potential phone number within a string of text?

Utilizing Google Cloud DLP in node.js to censor phone numbers from a string, even if the string contains other words. Check out more information on how to use this feature here. For instance, I need to redact the phone number in the following sentence: Do ...

Bug occurring when inserting Ajax content into a field without refreshing the second page

Recently, I followed a tutorial on how to submit a form without refreshing the page using jQuery. Instead of using PHP as recommended in the tutorial, I decided to create my own classic ASP page. However, I encountered a problem - when I try to input space ...

Disabling modal popup buttons in Bootstrap 4 using Javascript

JSFiddle DEMO: https://jsfiddle.net/2yx16k8L/ I'm encountering an issue with my JS code. I want a click on a div to open the entire content within it. However, this action is causing the modal button in the dropdown to stop working. How can I resolve ...

Using Three.js WebGL to create a custom circle with unique fill and border colors generated from a shader

Currently, I am utilizing Three.js alongside the WebGLRenderer. I am exploring ways or searching for an example on how to create circles using CircleGeometry and have the ability to manipulate their fill and border color through a vertex or fragment shad ...

How can I use Moment.js to show a custom message based on the current day of the week?

Currently, I am utilizing Moment.js to dynamically showcase various messages based on the day of the week. For instance, if it's: If it's Monday, I want it to display "It's Monday!" If it's Tuesday, I'd like it to show "Happy Tu ...

Loop through with <li> inside a <td> tag

I need help figuring out how to place a list of items inside a table row using ng-repeat in AngularJS. Here is my attempted code: <td> <div ng-repeat="x in total.count"> ...

How can I create a multidimensional array in Swift language?

I am trying to achieve a specific task involving an array : let myArray : [Int] = [1, 1, 1] The numbers in the array serve as an example, but the actual values will vary each time. I also have variables representing the minimum and maximum values let valu ...

Displaying a tableview of images converted from an array of base64 strings

I am facing an issue with binding images in base 64 format from an array to a table view. I attempted using the code snippet below to convert base 64 strings to image: UIImage *image = [UIImage imageWithData:[NSData dataFromBase64String:result]]; Howeve ...

Exploring the world of Node.js and the power of 64-bit var

Currently, I am developing a Node.js application that communicates via TCP with a C++ server. The server utilizes a binary protocol similar to Protocol Buffers but not identical. One of the data types returned by the server is an unsigned 64-bit integer ( ...

Uncertainty surrounding the concept of JavaScript objects

What is the reason for this not functioning properly? function displayValue(a,b){ this.a = a; this.b = b; $('p').text(a + " " + b); } var display = new displayValue(); display('1','2'); How does this still work ...

NuxtJS using Babel 7: the spread operator persists in compiled files

Struggling to get my NuxtJS app functioning properly on IE11. Despite multiple attempts to configure Babel for compatibility, spread operators are still present in the built pages files, suggesting that Nuxt code is not being transformed correctly. Below ...

Tips for retrieving the text value on keyboard enter press without triggering form submission

I am currently working on a feature where hitting the Enter key in a textbox should not automatically submit the form. The textbox is located within a form: @Html.TextBoxFor(model => model.ID, new { @class = "form-control input-sm", placehold ...

Transform the date and display it for every element in a PHP array

I am currently working on outputting a list of dates in the format 2012-06-18 to an XML file. foreach ($result_array as $date) { echo "<market date=\"".$date['saledate']."></market>\n"; } Everything seems to be working ...

Prevent tab switching from occurring by disabling click functionality on tabs

I've got different tabs set up in a similar way <md-tabs md-selected="selectedTab()"> <md-tab label="General"></md-tab> <md-tab label="Type"></md-tab> <md-tab label="Details"></md-tab> </md-tab ...

What steps should be taken to resolve the update problem in Sequelize?

Having an issue with the update method in MySQL ORM. User.update({ ResetPasswordToken : resetPasswordToken },{ where: { UserName: 'testuser' } }) Receive this Sequelize Log: Running query: UPDATE Users SET ResetPasswordToken=?,updat ...

Setting up React to dynamically insert data using input fields

Recently, I've dived into the world of ReactJS. Learning it has been quite challenging for me, and I often find myself feeling demotivated while working on it. One particular issue I'm facing is trying to insert data into an h1 element using an ...

What is the best way to change JSON into a key-value dictionary with TypeScript?

Here is a JSON example that I am working with: { "MyTest:": [{ "main": { "name": "Hello" }, "test2": { "test3": { "test4": "World" }, ...

Contrasting VSCode Live Server and Node Live Server

Recently delving into the world of JS, I've come across the need to set up a live server using npm. One popular extension in VSCode known as Live Server by Ritwick Dey caught my attention. I'm curious about the distinctions between utilizing this ...