Html 带有Angular JS和ASP.NET的级联组合框

使用ASP.NET（非MVC）和Angular.js

我是新手，需要帮助吗

我有4个选择使用angular.js链接在一起

唯一的问题是我想在页面加载时填充所有的

现在，只有主选择（控制所有其余部分的选择）被加载，当我选择一个项目时，所有其余部分都被相应地填充

我的Js如下：

    var app = angular.module('myApp', []);

    app.controller('ProfessionalsComboCtrl', function ($scope, $http) {

        $scope.professionalExpertiseTypes = [];
        $scope.subExpertise = [];
        $scope.professionalAreaTypes = [];
        $scope.professionals = [];
        $scope.professionals.ProfessionalExpertises = [];

        $http({
            method: 'POST',
            url: "Service/ProfessionalsService.asmx/GetProfessionals",
            data: {},
            dataType: "json",
            headers: {
                'Accept': 'application/json, text/javascript, */*; q=0.01',
                'Content-Type': 'application/json; charset=utf-8'
            }
        }).success(function (data) {

            $scope.professionals = JSON.parse(data.d);
        });


        $scope.GetSubExpertise = function (pId) {

            $http({
                method: 'POST',
                url:    "Service/ProfessionalsService.asmx/GetProfessionalsExpertise",
                data: { parentId: pId },
                dataType: "json",
                headers: {
                    'Accept': 'application/json, text/javascript, */*; q=0.01',
                    'Content-Type': 'application/json; charset=utf-8'
                }
            }).success(function (data) {

                $scope.subExpertise = JSON.parse(data.d);
            });
        }

<select ng-model="item.Id" ng-options="item.Id as item.Name for item in p.ProfessionalExpertises" ng-change="GetSubExpertise(item.Id)">
    </select>
<select ng-model="subItem.Id" ng-options="subItem.Id as subItem.Name for subItem in subExpertise">
    </select>
<select ng-model="areaTypes.AreaId" ng-options="areaTypes.AreaId as areaTypes.AreaName for areaTypes in p.ProfessionalAreas">
                </select>
                <select ng-model="p" ng-options="prof.Name for prof in professionals">
                </select>

我的HTML如下所示：

    var app = angular.module('myApp', []);

    app.controller('ProfessionalsComboCtrl', function ($scope, $http) {

        $scope.professionalExpertiseTypes = [];
        $scope.subExpertise = [];
        $scope.professionalAreaTypes = [];
        $scope.professionals = [];
        $scope.professionals.ProfessionalExpertises = [];

        $http({
            method: 'POST',
            url: "Service/ProfessionalsService.asmx/GetProfessionals",
            data: {},
            dataType: "json",
            headers: {
                'Accept': 'application/json, text/javascript, */*; q=0.01',
                'Content-Type': 'application/json; charset=utf-8'
            }
        }).success(function (data) {

            $scope.professionals = JSON.parse(data.d);
        });


        $scope.GetSubExpertise = function (pId) {

            $http({
                method: 'POST',
                url:    "Service/ProfessionalsService.asmx/GetProfessionalsExpertise",
                data: { parentId: pId },
                dataType: "json",
                headers: {
                    'Accept': 'application/json, text/javascript, */*; q=0.01',
                    'Content-Type': 'application/json; charset=utf-8'
                }
            }).success(function (data) {

                $scope.subExpertise = JSON.parse(data.d);
            });
        }

<select ng-model="item.Id" ng-options="item.Id as item.Name for item in p.ProfessionalExpertises" ng-change="GetSubExpertise(item.Id)">
    </select>
<select ng-model="subItem.Id" ng-options="subItem.Id as subItem.Name for subItem in subExpertise">
    </select>
<select ng-model="areaTypes.AreaId" ng-options="areaTypes.AreaId as areaTypes.AreaName for areaTypes in p.ProfessionalAreas">
                </select>
                <select ng-model="p" ng-options="prof.Name for prof in professionals">
                </select>

我让它工作，使选择是级联的，但我希望他们所有的填补时，页面加载，而不仅仅是“专业人士”

不知道该怎么做…因为所有其他选择都是从主选择中填充的…我需要为每个选择单独的对象（？）但是我会破坏级联

任何帮助都将不胜感激

---

谢谢

只需在第一个函数中添加对数据函数的调用，填充其他选定的函数即可：

$http({
    method: 'POST',
    url: "Service/ProfessionalsService.asmx/GetProfessionals",
    data: {},
    dataType: "json",
    headers: {
       'Accept': 'application/json, text/javascript, */*; q=0.01',
       'Content-Type': 'application/json; charset=utf-8'
    }
}).success(function (data) {
    $scope.professionals = JSON.parse(data.d);
    GetSubExpertise($scope.professionals[0].Id);
    $scope.professionalAreaTypes = $scope.professionals[0].ProfessionalAreas;
});

并将您的视图更改为：

<select ng-model="areaTypes.AreaId" ng-options="areaTypes.AreaId as areaTypes.AreaName for areaTypes in professionalAreaTypes">
                </select>

---

当然，添加适当的空支票和类似的东西，但我认为这个例子说明了这个想法

谢谢！那么p.ProfessionalAreas呢，因为它与ProfessionalAreas由相同的json数据填充，我如何在页面加载时独立填充它呢？是的，但是我失去了它们之间的链接..它只填充了第一个区域professional@RoyLivne对不起，我不清楚你的意图。。。独立填充ProfessionalAreas是什么意思？“ProfessionalsArea”组合取决于“professionals”和vice verca，但我也希望它在页面加载时填充所有值，无论我是否在“professional”组合中选择了值。但是因为它们是相互连接的，所以我别无选择……所以我想知道是否有办法在页面加载时填充所有这些组合并保持它们的链接……希望这更清楚