將數據直接加載到選擇框中angularjs

我有一個訂閱的客戶。您還可以編輯客戶訂閱。將數據直接加載到選擇框中angularjs

當您要編輯訂閱時，您可以在不同的選擇框中選擇不同的選項。當您在第一個選擇框中選擇一個選項時，其他選擇框將填充「屬於」您在第一個選擇框中選擇的選項的數據。

這裏是我的第一選擇框的HTML代碼：

<select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item as item.namn for item in superkundOptions" ng-change="onChangeSuperCustomer(selectedSupercustomer)">

這裏是我的angularjs代碼填充選擇開箱即用的數據：

$http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) { 
    $scope.superkundOptions = data; 
});

我剛開來自我後端的數據。

這裏是我的選擇盒的休息：

<select class="form-control input-sm2" ng-disabled="!selectedSupercustomer" ng-model="selectedGateway" ng-options="item as item.gwtypen for item in gatewayOptions" ng-change="onChangeGateway(selectedGateway)"><option value=''>Välj GW</option></select> 

<select class="form-control input-sm2" ng-disabled="!selectedSupercustomer" ng-model="selectedSwitch" ng-options="item as item.gatuadresser for item in switchOptions" ng-change="onChangeSwitch(selectedSwitch)"><option value=''>Välj switch</option></select>

我改變選擇盒的選項用下面的代碼：

$scope.onChangeSuperCustomer = function(selectedSupercustomer) { 

    $http.get($rootScope.appUrl + '/nao/abb/getGatewayData/' + selectedSupercustomer.nod_id).success(function(data) { 
     $scope.gatewayOptions = data; 
    }); 

    $http.get($rootScope.appUrl + '/nao/abb/getSwitchData/' + selectedSupercustomer.superkund_id).success(function(data) { 
     $scope.switchOptions = data; 
    }); 

    $http.get($rootScope.appUrl + '/nao/abb/getLanAbonnemangsformData').success(function(data) { 
     $scope.abbformOptions = data; 
    }); 

    $http.get($rootScope.appUrl + '/nao/abb/getSupplierData').success(function(data) { 
     $scope.supplierOptions = data; 
     console.log($scope.supplierOptions); 
    }); 
}

上面的代碼填充選擇盒包含數據，基於您在第一個選擇框中選擇的選項值。

現在爲止我的問題：

我想設置的客戶爲「選擇」在選擇盒當前訂閱設置。我怎樣才能做到這一點？

我試着用下面的代碼做手工：

$http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) { 
    $scope.superkundOptions = data; 
    $scope.superkundOptions.unshift({ id: $rootScope.abbData.superkund_id, namn: $rootScope.abbData.namn}); //Sets this to default selected In first selectbox 
    $scope.selectedSupercustomer = $scope.superkundOptions[0]; 
});

這工作。但問題是，我希望所有屬於「選定」值的數據都應該直接加載。正如您現在所看到的，僅當您選擇一個新值（在此觸發ng更改）時纔會生成數據。任何建議如何做到這一點？

來自我後端的數據，並將選擇框加載數據，是一個包含對象的數組。我可以以某種方式訪問整個對象，它的屬性設置爲「選中」時？誰能幫我？

來源

2015-04-17 user500468

這將是非常有益的，如果你能建立一個plunker一些模擬數據。 – tpie

另外，請提供您的數據模型以供參考。 – tpie

@ tpie：你是什麼意思「提供你的數據模型以供參考」？ – user500468

如果我的假設是正確的，你必須存儲在$rootScope.abbData當前訂閱，當你實例化的組件，你想從你的後端第一個選擇框中獲取數據，發現有一個電流訂閱選項，如選擇設置與根據它填充你的選擇框的其餘部分？

如果我這樣做是正確的，我想你只需要改變你的最後一個代碼塊，像這樣：

$http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) { 
    $scope.superkundOptions = data; 
    // find current subscription in data and set it as selected 
    angular.forEach($scope.superkundOptions, function(option) { 
     if (option.id === $rootScope.abbData.superkund_id) { 
      $scope.selectedSupercustomer = option; 
      // fire onChange event to populate rest of the select boxes 
      $scope.onChangeSuperCustomer(option)  
     } 
    }) 
});

來源

2015-04-17 07:56:11 Vaclav

非常感謝！ :) – user500468

將數據直接加載到選擇框中angularjs

回答

相關問題