将数据直接加载到选择框angularjs中

时间:2015-04-17 06:55:42

标签: javascript 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-change)时,才会生成数据。有什么建议怎么做?

来自我后端的数据,并使用数据加载选择框,是一个包含对象的数组。当它被设置为“选中”时,我可以以某种方式访问​​整个对象及其属性吗?任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

如果我的假设是正确的,那么当前订阅存储在$rootScope.abbData中,当您实例化组件时,您希望从后端获取第一个选择框的数据,找到当前订阅选项,将其设置为< em>选择并根据它填充其余的选择框?

如果我做对了,我认为你只需要更改你的最后一个代码块:

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