javascript - 将数据直接加载到选择框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)时，才会生成数据。有什么建议如何做到这一点？

来 self 的后端并用数据加载选择框的数据是一个包含对象的数组。当它设置为“选定”时，我能否以某种方式访问​​整个对象及其属性？谁能帮帮我？

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)       
        }
    })
});