New to Angular and exploring the Product object with Sku objects nested inside.
An app allows users to fetch a product, resulting in the Product object being assigned to $scope.product:
var app = angular.module('app', []);
app.controller('AppController', ['$scope', '$http', function($scope, $http){
$scope.product;
//selected sku model from dropdown
$scope.selectedSku;
/*
* Fetch product data from server
*/
$scope.getProduct = function(){
$http.post('get_product', {product_id: $scope.extProductId}).
success(function(product){
$scope.product = product;
}).
error(function(data){
console.log('something went wrong');
});
};
In addition to $scope.selectedSku, there's a select list showing Sku options:
<select class="form-control input-lg" ng-model="selectedSku" ng-options="sku.sku for sku in product.skus">
<option value=""> -- Select SKU -- </option>
</select>
During user interaction, re-fetching the Product object results in the select list reverting to "-- Select SKU --". Is this due to the new Product object replacing the underlying data?
How can Angular maintain the connection to selectedSku when re-fetching the Product?
Should I store the ID of the selected SKU and re-select it programmatically after the Product is re-fetched?
The Product object structure with Sku objects is as follows:
{
id: 1,
name: "Product Name",
skus: [
{
id: 1,
name: "Sku 1 Name",
},
{
id: 2,
name: "Sku 2 Name"
}
]
}