How can I associate objects as models using ng-options in angularjs

Question

Assume I have two objects: color and shirt.

Each shirt can have multiple properties as well as multiple colors which is basically an array of color objects.

function MyCntrl($scope) {
    $scope.colors = [
        {
            label:"Red",
            value:"r-e-d",
            available:true
        },
        {
            label:"Blue",
            value:"b-l-u-e",
            available:false
        }   
    ];

    $scope.shirts=[{
        size:"M",
        cost:100,
        colors:[ ]
    }
    ]
}

How can I use ng-options to append/remove color objects to/from shirts.color?

I want to associate scope.color objects to scope.shirts.color objects so that if I change something like name of the color or code of the color, then the corresponding items in the associated color objects in shirts.colors should also get updated automatically.

From what I know about ng-options and ng-model, I will have to create new objects for colors and set its values based on what is selected in the select box, but those objects will be independent of the color objects and changing the color objects will not update the corresponding objects in shirts.

Thank you in advance for your responses.

Valentyn Shybanov · Accepted Answer · 2013-02-07 15:28:48Z

6

You can use ng-options for that directly:

Color: <select multiple ng:model="shirt.colors" ng:options="c.value as c.label for c in colors"></select>

Here is a Plunker: http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

update

And about editing of source colors: if in shirt's color you store just value, it would be extremely hard to detect what was item was changed and re-select it in options (changed selected item unselects because AngularJS don't know reason of change).

As workaround you can select objects, not values. I've updated plunker.

edited Feb 7, 2013 at 15:28

answered Feb 7, 2013 at 14:36

Valentyn Shybanov

19.4k7 gold badges68 silver badges59 bronze badges

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

1 Comment

Gunjan Karun Over a year ago

I have a followup question i.e. how can I use checkboxes instead of select multiple to manage that array of objects. I have asked that question here stackoverflow.com/questions/14785273/…

Collectives™ on Stack Overflow

How can I associate objects as models using ng-options in angularjs

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related