How do I data bind select lists to arrays in angular?

Question

I need to have two drop down lists that contain integers 1 to 9 each initially. I think I can do that using something like the following:

<--html area-->
<select ng-repeat="num in MaxCupcakes">
    <option ng-model="num" />
</select> 

<select ng-repeat="num in MyCupcakes">
     <option ng-model="num" />
</select> 

<--script area -->

var app = angular.module("app", []);
app.controller('Ctrl', function() {

   $scope.MaxCupcakes = [1,2,3,4,5,6,7,8,9]; 
   $scope.MyCupcakes = [1,2,3,4,5,6,7,8,9]; 

});

Once I get this setup correct I would like what ever is selected in MaxCupcakes to limit the number in MyCupcakes. For example, if I set max cupcakes to 5, then I can only select 1-5 in mycupcakes.

ng-repeat would be used on <option> but more common to use ng-options on <select> — charlietfl
– charlietfl, Commented Jul 12, 2014 at 0:07
there's a lot going wrong with this code. you have arrays with a single malformed object in them, injecting something isn't used ($filter), ngRepeating the wrong elements, every option has a value of 1, ngModel on option rather than select and using the same value for both. I realize (hope) this is pseudo code, so you might want to spend some time creating something closer to working and then ask for help when you get stuck. — MrOBrian
– MrOBrian, Commented Jul 12, 2014 at 0:12
MrObrian, it is from working code that I am trying to shorten and sanitize. I do admit that I am struggling with learning angular, so please allow some room for not having it perfect when asking for help. It would be a high bar to have everything right in order to ask a question. I was shooting more for general idea so someone could say use ng-really-cool-array-binding-thing instead of expecting a working copy of what I am trying to do. Thanks for your input, regardless and I will fix the incorrect parts of my example. — user3648646
– user3648646, Commented Jul 12, 2014 at 4:26

arthurzp · Accepted Answer · 2014-07-12 00:35:41Z

2

A better method would be to use a filter on the second select.

<div ng-app ng-controller="Ctrl">
    <select ng-model="max">
        <option ng-repeat="num in MaxCupcakes" ng-click="changeMax(num)">
            {{num}}
        </option>
    </select>
    <select ng-model="foo>
        <option ng-repeat="num in MyCupcakes | limitTo:max">
            {{num}}
        </li>
    </select>
</div>

Also your arrays shouldn't have the {}. Here's what the ctrl should look like.

function Ctrl($scope) {
    $scope.MaxCupcakes = [1,2,3,4,5,6,7,8,9]; 
    $scope.MyCupcakes = [1,2,3,4,5,6,7,8,9];

    $scope.max = 9;
};

answered Jul 12, 2014 at 0:35

arthurzp

1093 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3648646 Over a year ago

Thank you, this is more than I was expecting and is a great example of how to do what I was looking for. I didn't think about filters.

Collectives™ on Stack Overflow

How do I data bind select lists to arrays in angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related