Question

我正在尝试将selectedContinent对象绑定到下拉列表。

申请说明

我正在构建一个应用程序，它应该代表一个相当简单的用例，处理简单的相关列表（即指向各大洲的国家/地区）。我们的想法是在逐步复杂的应用程序中学习AngularJS。

我已经成功构建了对“Continents”执行基本CRUD操作的功能......最基本的列表。

我现在需要提高难度，只需要一个档次，并创建一个在特定国家/地区执行CRUD操作的屏幕。每个国家当然都与一个大陆有关。

设计

应用程序通过Angular Factory“服务”访问大陆和项目。每个工厂都返回一个单件服务（我意识到我可以使用服务“服务”，但我先学习工厂，并不觉得我需要重写这件事。）

每项服务都提供访问CRUD功能的能力，但也存储“选定”项目。我将谈论大陆服务，因为它是我正在努力的那个。

因此视图开始生命从数据存储初始化大陆列表并将它们存储在大陆服务的数组中。

大陆服务代码，显示了init函数

var appSvcs = appSvcs || angular.module("app.services", ["app.repositories"]);
appSvcs.factory('ContinentService', ['ContinentRepository','Utilities', 'GlobalConfig',
    function (db, util, globalConfig) {
        'use strict';

        var continentSvc = null,
            getContinentService = function() {

            if (continentSvc === null) {
                continentSvc = new function () {

                    var self = this,
                        selectedContinentIndex = -1;

                    //#region public properties

                    this.continents = [];
                    this.selectedContinent = null;

                    //#endregion public properties

                    //#region public methods

                    this.initContinentList = function () {

                        return db.getContinents(); // returns a promise
                    };

                    this.setSelectedContinent = function (continentId) {

                        var continent = self.continents.filter(function (element) {
                            return element.Id === continentId;
                        });

                        self.selectedContinent = angular.copy(continent[0]);
                        selectedContinentIndex = self.continents.indexOf(continent[0]);
                    };

            // more methods go here 

                    //#endregion public methods
                }
            }

            return continentSvc;

            };

        return {
            getContinentService: getContinentService
        }
    }]);

视图的控制器，用于初始化大陆列表并填充服务中的“continents”数组。

angular.module（ “ListMgrApp”）。控制器（ 'CountryPanelCtrl'， ['$ scope'，'Utilities'，'LayoutManager'，'CountryService'，'ContinentService'，
function（$ scope，util，layout，countrySvc，continentSvc）{ 'use strict';

        //#region $scope fields and variables
        $scope.countrySvc   = countrySvc.getCountryService();
        $scope.continentSvc = continentSvc.getContinentService();
        //#endregion $scope fields and variables

        //#region private fields 
        var $uiCountryList = $('.country-list');
        //#endregion private fields

        //#region private methods
        function init() {
            //
            // initialize the continent list
            $scope.continentSvc.initContinentList().then(
                function (response) {
                    $scope.continentSvc.continents = response.data;
                },
                function (reason) {
                    //TODO: Handle Error
                });

        // other initialization methods are here
        };
        //#endregion private methods

        init();
    }]);

我使用这个数组来填充视图中的下拉列表......哪个效果很好;列表已成功填充大陆列表。

<select name="ContinentList" style="width:100%;"
    data-ng-model="continentSvc.selectedContinent"
    data-ng-selected="continentSvc.selectedContinent"
    data-ng-change="setSelectedContinent()"
    data-ng-options="continent as continent.Name for continent in continentSvc.continents | orderBy:'Name'">
    <option style="display:none;" value="">Select a Continent</option>
</select>

此外，根据我对发布的评论here的理解，这已正确配置，以便在更改列表选择时选择大陆OBJECT，而不仅仅是单个字段/属性值。

我遇到的问题是以编程方式设置选定的大陆。此时可能值得注意的是，还有第二个控制器在这里工作。该控制器管理国家列表。但是，由于两个视图都使用返回单例的大陆服务，因此数据及其任何更改都会反映在两个控制器中。当用户从列表中选择现有国家时，该选择将服务的“selectedContinent”属性设置为分配给该国家/地区的大陆。

$scope.setSelection = function (country) {

    $scope.continentSvc.setSelectedContinent(country.ContinentId);
    // see above service code sample for definition of "setSelectedContinent"
}

由于这个selectedContinent是在服务中定义的，我希望它被改变以影响绑定到它的任何对象。我通过下拉列表在视图中放置一个简单的输出模板，并在选择国家/地区时观察到这种情况发生了变化，我已经验证了这一点。

{{ continentSvc.selectedContinent.Name }}

问题在于，即使上面的测试输出被正确绑定，下拉列表也会恢复到未选中状态。它不会停留在所选的任何内容上，它会变为“无”被选中。在DDL上指定为ng-model的“continentSvc.selectedContinent”不会反映为所选的下拉列表项，即使它已更改。我不明白为什么会这样。我的测试输出确认“continentSvc.selectedContinent”确实发生了变化，并且该变化正在达到它的绑定元素。因为它被设置为DDL的ng模型，所以我希望DDL也能改变。 ???

为了提供足够的信息，我希望我没有太过冗长。感谢您的关注和帮助。

我已查看并从以下帖子中删除了有关信息，但没有解决此问题。

How to select an option in a dropdown list angularjs

How to set a selected option of a dropdown list control using angular JS

AngularJS - ng-option dropdown list not setting ng-model value when False selected

下拉列表不绑定到AngularJS模型

0 个答案: