Question

使用ASP.NET（而不是MVC）和Angular.js，

我是Angular的新手，所以需要一些帮助

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

我的HTML如下：

<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>

JSON“Professionals”对象结构例如：

"[{"Id":2056,"Name":"Rick",
"ProfessionalExpertises":[{"Id":1,"Name":"Teachers","ParentId":0,"HasChildren":false},
{"Id":2,"Name":"Accountant","ParentId":0,"HasChildren":false},{"Id":4,"Name":"Graphologist","ParentId":0,"HasChildren":false}],
"ProfessionalAreas":[{"AreaId":1,"AreaName":"North","Key":1,"IsSaved":true},{"AreaId":3,"AreaName":"South","Key":3,"IsSaved":true},{"AreaId":5,"AreaName":"Center","Key":5,"IsSaved":true}]},{"Id":2085,"Name":"DannyBoy",
"ProfessionalExpertises":[{"Id":1,"Name":"Doctors","ParentId":3,"HasChildren":false},
{"Id":2,"Name":"Accountant","ParentId":0,"HasChildren":false},{"Id":4,"Name":"Grafologist","ParentId":0,"HasChildren":false}],
"ProfessionalAreas":[{"AreaId":1,"AreaName":"North","Key":1,"IsSaved":true}"

我让它工作，以便选择是级联但我希望所有这些都填写页面加载而不只是“专业人士”......

不确定怎么做...因为所有其他的选择都是从主要的选项填充...我需要一个单独的对象为每个（？）然后我会破坏级联...

任何帮助将不胜感激..

由于

Answer 1

只需添加对数据函数的调用，填充其他所选内部第一个函数：

$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>

当然添加适当的空检查和类似的东西，但我认为这个例子显示了这个想法。

使用Angular JS和ASP.NET

1 个答案: