Loop through ng-options using ng-repeat that are linked to the same ng-model

Question

Loop through ng-options using ng-repeat that are linked to the same ng-model

This situation may seem odd, but I am willing to adjust the API Data if necessary.

My requirement is to have multiple dropdowns sharing the same ng-model.

The Question:

Why does ng-model become unique when using the same variable name?

How can I ensure that each drop down shares one ng-model="selectedSize"

<div ng-repeat="(key, val) in listing.colors_and_sizes.data" >
<p>{{selectedSize}}</p>
 <input
    ng-checked="selected"
    type="radio"
    name="colors"
    ng-model="selected.pdw.color"
    ng-value="key"/>

<select ng-model="selectedSize"
        ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
        ng-change="selected.product.set.size(key,val, selectedSize);">
        <option value="">Please select a size</option>
</select>

</div>

javascript angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

When using ng-repeat, a child scope is created, resulting in selectedSize being a property on that specific child scope. This means each one will have its own selection. To understand more about child scope inheritance and how it relates to different directives, check out this informative answer here. If you want multiple elements to share the same ng-model, simply define a scope property in your controller like this:

$scope.size = {};

Then, set your ng-model as ng-model="size.selectedSize":

<select ng-model="size.selectedSize"
        ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
        ng-change="selected.product.set.size(key,val, size.selectedSize);">
        <option value="">Please select a size</option>
</select>

You don't necessarily need to pass the size.selected; it will be available in your controller regardless, but there's no harm in passing it along as well.

Answer 2

When using ng-repeat, a child scope is created, resulting in selectedSize being a property on that specific child scope. This means each one will have its own selection. To understand more about child scope inheritance and how it relates to different directives, check out this informative answer here. If you want multiple elements to share the same ng-model, simply define a scope property in your controller like this:

$scope.size = {};

Then, set your ng-model as ng-model="size.selectedSize":

<select ng-model="size.selectedSize"
        ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
        ng-change="selected.product.set.size(key,val, size.selectedSize);">
        <option value="">Please select a size</option>
</select>

You don't necessarily need to pass the size.selected; it will be available in your controller regardless, but there's no harm in passing it along as well.

Loop through ng-options using ng-repeat that are linked to the same ng-model

The Question:

Answer №1

Similar questions

What steps should one take to address issues related to Datatables in Laravel and Vue?

How can I pass the value of a variable from one Vue.js 2 component to another?

What is the method to execute a prototype function within another prototype?

TinyMCE - The control with the name 'content' is considered invalid and cannot receive focus

The information retrieved from the open weather map API is difficult to interpret

Can you provide some instances of attribute directives?

How can I make <p> elements change color when scrolling?

What methods can I use to prevent a number from becoming negative?

What is the best way to eliminate specific duplicate characters from a string using JavaScript?

RadScheduler refresh rate

Determining the current element's index as I scroll - using Jquery

Retrieve data from JSON using AJAX

Setting up Vue CLI 4 with ESLint, TypeScript, Stylelint for SCSS, and Airbnb rules in the VS Code editor with automatic fixes on save

ReactTable version 7 is experiencing an issue where the noDataText is not displaying when there is empty data, specifically when using

What is the method for setting required to true only when the user meets a specific condition?

Looking to retrieve object values in JavaScript in a dynamic manner?

Having trouble with Route Param in React after deploying the application to an Apache server

AngularJS restricts the display of elements to only 4 using the limitTo filter

Is it possible to update a module on an end user's device without using npm or node.js?

Leveraging previous state values within a setInterval function in React