Synchronizing two dropdown menus in Angular

I'm having trouble with binding and synchronizing select elements. I am trying to make two select elements work together, but using ng-value="$index" doesn't seem to be doing the trick.

These are in sync:

<select  ng-model="myVar1"><option value="{{n}}" ng-repeat="(n, o) in ['donny', 'felix', 'bob'] track by $index" >{{o}}</option></select>

{{o}}

However, these do not synchronize:

<select  ng-model="myVar2"><option ng-value="$index" ng-repeat="o in ['donny', 'felix', 'bob'] track by $index" >{{o}}</option></select> <select  ng-model="myVar2"> <option ng-value="$index" ng-repeat="o in ['donny', 'felix', 'bob'] track by $index" >{{o}}</option>   </select>

JSBIN: http://jsbin.com/dirugikice/1/edit?html,js,output

Can anyone help me figure out what I am missing?

Answer №1

Embrace your $index in square brackets, for example [{$index}]

<select ng-model="myVar2"><option ng-value="[{$index}]" ng-repeat="o in ['donny', 'felix', 'bob'] track by $index">{{o}}</option></select> <select ng-model="myVar2"> <option ng-value="[{$index}]" ng-repeat="o in ['donny', 'felix', 'bob'] track by $index">{{o}}</option> </select>

http://jsbin.com/pubapigibi/1/edit

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

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

Why does WebdriverIO send a POST request for an unused webelement?

Exploring the capabilities of webdriverIO has been quite enjoyable! There are many features of this framework that I already appreciate. In my investigation, I wanted to see how WebdriverIO handles non-existing elements and lazy element loading in this te ...

Tips on adding line breaks after periods that are not at the end of a sentence in HTML text nodes with regular expressions

Looking to craft a regex that can identify all periods not enclosed in quotes and not followed by a '<'. This is for the purpose of converting text into ssml (Speech Synthesis Markup Language). The regex will be utilized to automatically inse ...

When state updates in React, the component will rerender without affecting its style

There seems to be a minor oversight on my part. The issue arises in the parent component where I maintain a state of selected items, which are added from the child component. The background color of the child component changes when an item is selected. Ad ...

Seamless upward swipe effect (Animation in React Native)

How can I achieve smooth closing of a modal screen by swiping up? The modal screen should be able to close smoothly by swiping up. Currently, the modal is implemented with an Animated Value and PanResponder in order to detect swiping gestures. The problem ...

Updating Select Options with Multiple Values using Javascript

My goal is to update the selected value of multiple select elements simultaneously using JavaScript. However, I am facing an issue where my script only updates one select element instead of all of them on the page. Unfortunately, I cannot modify the id att ...

Allowing access from different domains when using Angular.js $http

Whenever I encounter a CORS issue while developing a webapp, my go-to solution is to brew some coffee. However, after struggling with it for some time, I am unable to resolve the problem this time and need assistance. Below is the client-side code snippet ...

Enhancing your Selenium test case strategies for better performance

I've created a test case that compares two arrays, removing matching elements and throwing an exception for non-matching ones. Although it's functional, the test is quite long and messy. Can anyone suggest ways to optimize or improve it? System ...

angular-bootstrap-mdindex.ts is not included in the compilation result

Upon deciding to incorporate Angular-Bootstrap into my project, I embarked on a quest to find a tutorial that would guide me through the download, installation, and setup process on my trusty Visual Studio Code. After some searching, I stumbled upon this h ...

Leveraging AngularJS for retrieving the total number of elements in a specific sub array

I'm currently working on a to-do list application using Angular. My goal is to show the number of items marked as done from an array object of Lists. Each List contains a collection of to-dos, which are structured like this: [{listName: "ESSENTIALS", ...

Generating an error during mongoose callback

Currently, I am in the process of developing a Node.js + Express application. The database I am working with is Mongo, and I have integrated Mongoose to establish a connection with this database. In my code, I am attempting to handle exceptions within a M ...

Encountering a "focus" error with React-Native-Phone-Input library, where the property is null

For my project, I decided to incorporate the react-native-phone-input library. Everything was going smoothly until I encountered an issue with their focus function. Initially, it worked perfectly fine, but subsequently, when I attempted to input a phone nu ...

Concerns regarding rendering HTML and drawing in Node.js

Having an issue where node.js is serving an html file with an SVG drawing. The index.html features a chart similar to the line chart found at http://bl.ocks.org/mbostock/3883245 Whenever I try to serve the index.html through the express server, I end up ...

Having trouble with email validation in AngularJS?

Here is the input I would like to provide: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1808398cc92809594938fa1868c80888dcf828e8c">[email protected]</a> The hyphen is causing an issue in the email ID validati ...

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Currently, I am utilizing the Raphaël library to create a network graph, where nodes are depicted as circles. Users have the ability to dynamically add nodes by clicking on the canvas. When a new node is added, an Element object is pushed into both a Set ...

Extract the JSON data and store it in an array

I'm currently working on parsing a JSONObject using JavaScript. My goal is to parse the object from the JSON and assign it to an array. Any suggestions or help would be greatly appreciated. Here's the code I'm working with: Here is my JavaS ...

Error: The module 'cropbox' could not be located. 2

I posed the inquiry Module not found: Error: Can't resolve 'cropbox' Unfortunately, I did not receive a response, prompting me to delve into more specific issues and scour StackOverflow for solutions. After investigating, I identified thr ...

What is the mechanism by which a custom hook, functioning as a trigger, initiates the re-rendering of a separate function component?

According to the official documentation on Custom React Hooks, one particular use case for utilizing a custom hook is demonstrated through the following example: function FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); retur ...

The positioning of drawings on canvas is not centered

I'm facing an issue while attempting to center a bar within a canvas. Despite expecting it to be perfectly centered horizontally, it seems to be slightly off to the left. What could possibly be causing this discrepancy? CSS: #my-canvas { border: ...