将数据直接加载到selectbox angularjs中

Question

我有一个订阅的客户.您还可以编辑客户订阅.

当您要编辑订阅时,您可以在不同的选择框中选择不同的选项.当您在第一个选择框中选择一个选项时,其他选择框将填充"属于"您在第一个选择框中选择的选项的数据.

这是我的第一个选择框的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-change)时,才会生成数据.有什么建议怎么做？

来自我后端的数据,加载带有数据的选择框,是一个包含对象的数组.当它被设置为"选中"时,我可以以某种方式访问​​整个对象及其属性吗？谁能帮我？

Answer 1

如果我的假设是正确的，您将当前订阅存储在其中$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)       
        }
    })
});