Sharing Top Content from the Angular-sphere.

[SOLVED] Multiple select boxes with different selected values in angularJS- Angular.js Recipes

  • Each select box needs to have a different selected value.
  • So far everything I’ve seen has elements that share the same selected value.
  • Try to have one scope that mutates with each select box?
  • Thanks

    You need to bind each select box to its own scope.

  • As far as I understand, you need each selectbox to have different value.

You need to bind each select box to its own scope. You can do it manually, binding each one to a new object instead of the same isSel, or you can use a ng-repeat like so:

http://jsfiddle.net/zmU8R/9/

html:

<div ng-app=””>
<div ng-controller=”MyCntrl”>
<div ng-repeat=”control in controls”>
<select ng-model=”control.isSel” ng-options=”c.name for c in colors”></select><br />
</div>
<hr />
<div ng-repeat=”control in controls”>
{{control.id}}: {{control.isSel}}
</div>
</div>
</div>

script:

function MyCntrl($scope) {
$scope.controls = [
{id: 1, isSel:null},
{id: 2, isSel:null},
{id: 3, isSel:null}
];
$scope.colors = [
{name:’black’},
{name:’red’},
{name:’yellow’}
];
}


@angular_recipe: Multiple select boxes with different selected values in angularJS #Angular #AngularJS

I have multiple select boxes and I’m using angular JS. Each select box needs to have a different selected value. So far everything I’ve seen has elements that share the same selected value. In order to achieve this a scope is used. Since I can potentially have hundreds of drop downs… actually thousands… what is the correct approach here? Create a scope for each one? Try to have one scope that mutates with each select box?

Here is an example with what I have jsfiddle.

Any help is much appreciated.

Thanks

You need to bind each select box to its own scope. You can do it manually, binding each one to a new object instead of the same isSel, or you can use a ng-repeat like so:

http://jsfiddle.net/zmU8R/9/

html:

script:

Not sure I’ve figured out what you exactly want. As far as I understand, you need each selectbox to have different value. So, you need to bind each selectbox to a different variable.

For a much clearer example, I made selectboxes count variable here.

You can test it here: http://jsfiddle.net/zmU8R/7/ If I misunderstood your question, feel free to correct me.

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Multiple select boxes with different selected values in angularJS- Angular.js Recipes

Comments are closed, but trackbacks and pingbacks are open.