Building an array with select and objects in AngularJS

Question

I'm trying to build an array that allows users to select from a set of options. I have a generic array of objects, and when I add a new item to my model, I am able to select one of those objects.

The problem I'm having (I believe) is that the ng-options I'm using to populate the list of items get's cleared once a user makes a selection. I'm not sure how to keep the full list of objects so that the user can change their mind if they want to.

I put together a quick sample of what I'm trying to do - http://jsfiddle.net/b0kwx1nj/

I'd appreciate any help anyone can provide.

Angular:

var myApp = angular.module('myApp', []); function ToppingCtrl($scope) { $scope.toppings = [{ name: 'Cheese', price: 0.5 }, { name: 'Ham', price: 1.5 }, { name: 'Sauce', price: 0.25 }]; $scope.myToppings = []; $scope.addTopping = function() { var newTopping = angular.copy($scope.toppings); $scope.myToppings.push(newTopping); } } 

HTML:

<div ng-controller="ToppingCtrl" class="container"> <table> <tr> <th>Topping</th> <th>Price</th> </tr> <tr ng-repeat="item in myToppings track by $index"> <td> <select id="top_{{$index}}" name="top_{{$index}}" title="top_{{$index}}" ng-model="myToppings[$index]" ng-options="topping.name for topping in myToppings[$index]" > <option value=''>-- select --</option> </select> </td> <td>{{myToppings[$index].price}}</td> </tr> </table> <button ng-click="addTopping()">Add topping</button> </div> 

Answer 1

The reason it's getting cleared is addTopping() converts the myToppings[$index] to an array containing 3 elements from toppings which shows up as the dropdown list.

It gets converted to a single element (not an array anymore) as soon as you make a selection in your dropdown - and that's why the value doesn't stick. You should link the ng-options to toppings instead of myToppings[$index] to correct that. And, you can just change the addToppings() to add a new empty object to the myToppings[].

Here's your new code:

HTML:

<select id="top_{{$index}}" name="top_{{$index}}" title="top_{{$index}}" ng-model="myToppings[$index]" ng-options="topping.name for topping in toppings" > <option value=''>-- select --</option> </select> 

Angular:

$scope.addTopping = function() { var newTopping = {}; $scope.myToppings.push(newTopping); } 

Hope it helps.

Answer 2

Change ng-options to return the entire topping object and use the as label clause to show the topping name in the selector:

<tr ng-repeat="item in myToppings track by $index"> <td> <select id="top_{{$index}}" name="top_{{$index}}" title="top_{{$index}}" ng-model="item" <!-- REPLACE ng-options="topping.name for topping in myToppings[$index]" --> <!-- INSTEAD --> ng-options="topping as topping.name for topping in toppings" <option value=''>-- select --</option> </select> </td> <td>{{item.price}}</td> </tr> 

The DEMO on JSFiddle