这是为什么SELECT2控制不是通过AngularJS控制器动态数据填充？ [英] Why is this select2 control not populating with dynamic data through an AngularJS controller?

问题描述

在模板，我有：

    <div ng-controller="projectListController as projects" class="pull-right" id="projectListDropDown">

        <select ui-select2 id="projectListDD" placeholder="All" class="width240" ng-model="projects.projectSelection">
            <option value=""></option>
            <option ng-repeat="item in projects.projectList" value="{{item.WebsiteName}}">{{item.WebsiteName}}</option>
        </select>

    </div>

我想填充从 projectList 下面的下拉列表：

app.controller('projectListController', ['$rootScope', '$scope', '$log', 'abstractDataFactory', 'customUIFunctions', 'globalContainer',
    function ($rootScope, $scope, $log, abstractDataFactory, customUIFunctions, globalContainer) {

       dashboardGlobals = this.dashboardGlobals = globalContainer.dashboardGlobals;
        var dataFactory = new abstractDataFactory("/odata/ProjectList");
        var projectController = new abstractDataFactory("/Projects/ChangeCurrentProject")  // load up projectDashboardDTO

        this.selectProjectPlaceholder = "Loading Projects . . .";

        this.filterItems = [
          { id: 1, text: 'Item1' },
          { id: 2, text: 'Item2' },
          { id: 3, text: 'Item3' },
          { id: 4, text: 'Item4' }
        ];

        this.projectList = [];

        // TODO; keep a global list of projects
        // Get a list of current projects
        dataFactory.getList("")   // no parameters
            .success(function (result) {
                this.projectList = result.value; //<- array of objects is returned
                dashboardGlobals.projectList = result.value;  
                this.selectProjectPlaceholder = "Select a project . . . "

                $("#projectListSelection").select2({ width: '240' });
            })
            .error(function (error) {
                customUIFunctions.showError("Data Error - Unable to Load Project List"); // use default error message
                console.log("data error");
            });

我已确认有数据 result.value 但清单保持空白。

然而，当我使用 projects.filterItems 在 NG-重复，（以及 ID 和文本字段名）填充的列表中。

However, when I use projects.filterItems in the ng-repeat, (along with id and text field names) the list is populated.

我也想改变的值是在转角全局可访问的，所以我注入我自己的 GlobalContainer的服务进入该控制器，并且每当页面刷新，我想确保所选择的值保持一致，而不是重置。

I also want the changed value to be globally accessible in Angular, so I injected my own globalContainer service into this controller, and whenever the page is refreshed, I want to ensure the selected value remains consistent, rather than resetting.

- 更新 -

这个问题似乎是在 .success 区， this.projectList 是未定义。如果我做 VAR projectList = this.projectList = [] 没有错误，但这似乎并不正确。

The problem seems to be in the .success area, this.projectList is undefined. If I do var projectList = this.projectList = [] no error, but this doesn't seem right.

所以，问题是，试图事后定义的变量，并使用控制器... 。

So the issue is with trying to define the variables after the fact, and using Controller as....

我怎样才能得到这个工作？

How can I get this working?

推荐答案

阅读一些关于一半时页面后，<一个href=\"http://discuss.$c$cschool.io/t/shaping-up-with-angularjs-why-use-this-instead-of-scope/4801/18\"相对=nofollow>这里，以及关于 $范围之差略偏进一步的了解和这个，以它们在 .success ，我声明是如何工作的 VM 作为一个顶级这个：

After reading something about half way down the page, here, and a bit more further understanding about the difference between $scope and this, in how they work in .success, I declared vm as a top-level this:

    var vm = this;
    vm.dashboardGlobals = globalContainer.dashboardGlobals;
    var dataFactory = new abstractDataFactory("/odata/ProjectList");
    var projectController = new abstractDataFactory("/Projects/ChangeCurrentProject")  // load up projectDashboardDTO

    vm.projectList = [];
.
.
.

        dataFactory.getList("")   // no parameters
            .success(function (result) {
                vm.projectList = result.value;
                vm.dashboardGlobals.projectList = result.value;
                vm.selectProjectPlaceholder = "Select a project . . . "

这篇关于这是为什么SELECT2控制不是通过AngularJS控制器动态数据填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！