c# - 需要使用 Angular 保留在 MVC View 的下拉列表中选择的值

Question

我是 MVC 和 AngularJs 的新手，所以如果这是一个愚蠢的问题，请原谅。我在使用 AngularJs 填充的 Asp.net MVC View 中有一个下拉列表。当用户在下拉列表中选择一家公司时，我使用 companyId 来填充一个无序列表。我的问题是，我需要在另一个 Controller 和 C# 方法中使用相同的选定 CompanyID。我找到了一些关于在服务中保存数据以重用它的信息，但我不确定这是否是我真正需要的(或者是否有比创建服务更简单的方法)，但如果是, 我不知道如何保存服务中的值。

这是我的查看代码:

{{company.vchCompanyName}}

当前仪表板模块:

{{m.vchRankingWidgetModuleHeaderText}}

Here is my Angular Controller code:

    myApp.controller("CompanyController", 
    function($scope, $timeout, companyService)
    {
        getCompanies();
        function getCompanies() {
            companyService.getCompanies()
                .success(function (data) {
                    $scope.companies = data;
                })
             .error(function (error) {
                 $scope.status = 'Unable to load customer data: ' + error.message;
             });
        };


        $scope.getCurrentModules = function(){
            companyId = $scope.company;
            companyService.getCurrentModules(companyId)
            .success(function (newdata){
                $scope.currentModules = newdata;
            });

        }

    });

这是我的 Angular 服务:

angular.module('dashboardManagement')
       .service('companyService', ['$http', function ($http) {
    this.getCompanies = function () {
        return $http.get('/Home/GetAllCompanies');
    };

    this.getCurrentModules = function (id) {
        return $http.get('/Home/GetCurrentModules?companyId=' + id);
    };
}

]);

非常感谢任何帮助!

我尝试使用该服务，但无法正常工作。如果选中业务部门复选框，我需要显示公司的业务部门。我将函数“getBusinessUnits”放在 ng-checked 上并尝试使用该服务来检索 CompanyID。我的 View 如下所示:

            <div ng-controller="BusinessUnitsController">
            <input id="ckBusinessUnit" type="checkbox" ng-checked="getBusinessUnits()"/>Exclude by Business Units<br />
            <ul>
                <li ng-repeat="unit in businessUnits">{{unit.Description}}</li>
            </ul>
        </div>

我的 Controller 看起来像这样:

myApp.controller("BusinessUnitsController",
    function ($scope, $timeout, companyService) {
        $scope.getBusinessUnits = function () {
            companyId = companyService.selectedCompanyId;

            companyService.getBusinessUnits(companyId)
                .success(function (data) {
                    $scope.businessUnits = data;
                 });
        };
    });

服务中的代码与您建议的完全相同:

   angular.module('dashboardManagement')
.service('companyService', [
    '$http', function ($http) {

        this.selectedCompanyId = null;

        this.getCompanies = function () {
            return $http.get('/Home/GetAllCompanies');
        };

        this.getCurrentModules = function (companyId) {
            this.selectedCompanyId = companyId;
            return $http.get('/Home/GetCurrentModules?companyId=' + companyId);

        };

        this.getBusinessUnits = function (companyId) {
            return $http.get('/Home/GetBusinessUnits?companyId=' + companyId);
        }
    }
]);

我显然遗漏了一些东西。

Answer 1

CompanyService 可用于存储 selectedCompanyId 作为属性。

angular.module('dashboardManagement')
       .service('companyService', ['$http', function ($http) {

    this.selectedCompanyId = null;

    this.getCompanies = function () {
        return $http.get('/Home/GetAllCompanies');
    };

    this.getCurrentModules = function (companyId) {
        this.selectedCompanyId = companyId;
        return $http.get('/Home/GetCurrentModules?companyId=' + companyId);
    };
}]);

然后您可以通过注入(inject) companyService 在其他 Controller /指令中的任何地方访问 selectedCompanyId。

请注意，它就像一个具有单个实例的单例，因此您只能为整个 Angular 应用程序选择一个公司。