CODEWITHSUNDEEP
angularjs
deekay
deekay

Reputation: 607

AngularJS Setting default SELECT values

Basic 'shopping cart' scenario.Users should be choosing their desired products in a form environment. Every product has a core price and multiple additional options available which change the price when selected.

Products and options are shown in two SELECT fields which are getting populated like this:

$scope.products = [
{
    name:'Product A',
    cost:5,
    options: [{name:"Option 1", value:10}]
},

{
    name:'Product B',
    cost:10,
    options: [{name:"Option 1", value:10},{name:"Option 2", value:15}]
}
];

$scope.cart = {
    items: [{            
        qty: 1,
    }]
};

and

<tr ng:repeat="item in cart.items">
  <td>
    <div class="type-select">
      <select ng-model="item.product" ng-options="p.name for p in products"></select>
    </div>      
  </td>
  <td>
    <div class="type-select">
      <select ng-model="item.option" ng-options="o for o in item.product.options.name" ng- disabled="!checked">
    </div>         
  </td>    
  <td>
    <input ng:model="item.qty" value="1" size="4" ng:required="" ng:validate="integer" class="ng-pristine ng-valid ng-valid-required input-mini">
  </td>
  <td>
     {{calculate()}}
  </td>
</tr>

How can i set default value for the cart items?

Upvotes: 1

Views: 276

Answers (1)

Nikola Yovchev
Nikola Yovchev

Reputation: 10226

You can have a watch on items.

As soon as an item is added, you should assign that item's product to be the first product. Something like that:

$scope.$watchCollection('cart.items', function(newValue, oldValue){
   var changedItem = newValue[newValue.length-1];
   changedItem.product = $scope.products[0];
});

Of course, that would be assuming you know that $scope.products is an array and that it is not empty. You can have some checks for that. Anyway, I think it is weird to have default values for that but there is a way for you.

Upvotes: 2

Related Questions