角度更新模型數據維護選擇列表中的選定選項

我是Angular的新手，嘗試使用Product對象。 Product對象包含許多Sku對象。角度更新模型數據維護選擇列表中的選定選項

用戶可以使用我的應用程序來獲取產品，該產品返回Product對象，其中包含Sku對象。當返回的產品對象，它的設置等於這樣的$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對象替換。當產品對象被重新獲取時，Angular有沒有辦法維持與selectedSku的連接？

或者，解決方案是跟蹤所選SKU的ID，然後在產品重新獲取後以編程方式重新選擇該SKU？

產品對象，其中包含SKU的對象，看起來是這樣的：

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

來源

2014-09-18 flyingL123

什麼是數據結構'sku'對象？ – zsong 2014-09-18 21:36:37

我剛剛添加了這個問題的結尾。這有幫助嗎？ – flyingL123 2014-09-19 00:48:39

如果你願意犧牲模型中的整個對象，你可以這樣做，使用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/

來源

2014-09-19 14:29:20 Daniel

謝謝，這是一個很好的建議。但是，我想根據所選SKU的某些其他屬性在頁面上顯示信息。如果模型只包含ID，這可以完成嗎？我需要在select上使用'ng-change'來更新頁面上顯示的SKU信息嗎？ – flyingL123 2014-09-19 15:01:45

你當然可以使用ng-change然後存儲對象。對於更簡單的方法，不要將ng選定的代碼嵌入到屬性中，而要使用函數，並且當它發現相等時將對象存儲在其他地方。讓我知道如果這對你沒有意義 - 我可以更新小提琴。 – Daniel 2014-09-19 15:32:13

如果你不介意更新小提琴演示，那會很棒。 – flyingL123 2014-09-19 16:20:30

VAR selectedProduct =找到$ scope.product.skus產品根據產品的ID等，然後做： $範圍.product = selectedProduct;

來源

2014-09-18 20:40:32 ABOS

角度更新模型數據維護選擇列表中的選定選項

回答

相關問題