Question

我是Angular的新手并尝试使用Product对象。 Product对象中包含许多Sku对象。

用户可以使用我的应用程序获取产品，该产品返回Product对象，其中包含Sku对象。返回Product对象时，它设置为$scope.product变量，如下所示：

var app = angular.module('app', []);

app.controller('AppController', ['$scope', '$http', function($scope, $http){

    $scope.product;

    //this will contain the selected sku model that's selected in the dropdown
    $scope.selectedSku;

    /*
    * Get a product and all of it's data from the 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');
            });
    };

如您所见，还有一个名为$scope.selectedSku的变量。此变量保存当前在选择列表中选择的Sku对象。选择列表如下所示：

<select class="form-control input-lg" ng-model="selectedSku" ng-options="sku.sku for sku in product.skus">
    <option value=""> -- Select SKU -- </option>
</select>

在用户与应用程序交互期间有一些要点，我想从服务器重新获取Product对象。当我这样做时，我再次将结果设置为$scope.product，就像之前一样。但是，当我这样做时，选择列表不再选择正确的选项。相反，它会显示“ - 选择SKU - ”选项。

我假设这是因为基础数据正在被新的Product对象替换。在重新获取Product对象时，Angular有没有办法维持与selectedSku的连接？

或者，是否能够跟踪所选SKU的ID，然后在重新获取产品后以编程方式重新选择该SKU？

包含Sku对象的Product对象如下所示：

{
    id: 1,
    name: "Product Name",
    skus: [
        {
            id: 1,
            name: "Sku 1 Name",
        },
        {
            id: 2,
            name: "Sku 2 Name"
        }
    ]
}

Answer 1

var selectedProduct =根据产品的ID等从$ scope.product.skus中查找产品然后执行： $ scope.product = selectedProduct;

Answer 2

如果您愿意牺牲模型中的整个对象，您可以执行类似的操作并使用ng-repeat而不是ng-options。

<div ng-controller="AppController">
    <select class="form-control input-lg" ng-model="selectedSku" >
        <option value=""> -- Select SKU -- </option>
        <option ng-repeat="sku in product.skus" ng-selected="{{ sku.id == selectedSku }}" ng-value="sku.id" ng-bind="sku.id"></option>
    </select>
    <button ng-click="resetProductSkus()">Reset Product Skus</button>
</div>

JS：

var app = angular.module('app', []);

app.controller('AppController', function ($scope, $http) {

    $scope.product = {
        skus: [{id:1},{id:2},{id:3},{id:4}]
    };

    $scope.resetProductSkus = function() {
        console.log('resetting products');
        $scope.product = angular.copy($scope.product);
    };
});

http://jsfiddle.net/nobsex5t/26/

角度更新模型数据维护选择列表中的选定选项

2 个答案: