AngularJs使用ui-select“无法设置未定义的属性'gridOptions'”[重复]

Question

我正在尝试在 angularJS 中与 ui-select 一起使用的下拉菜单中从数据库中获取数据，并通过单击按钮在 ui-grid 下面显示与所选项目相关的一些数据。

我已尝试使用 select、option 标签，它工作正常。之后，我尝试使用 ui-select 和 angular 并失败了，现在即使之前的尝试也无法正常工作。

我已经创建了 angular 文件，成功地从数据库中获取了 JSON 格式的数据，但是在控制台中它给了我“无法设置未定义的属性 'gridOptions'”。

Angular JS 代码

var app = angular.module('UmsApp', ['ngTouch', 'ui.grid', 'ui.select']);
app.controller('StudentController', [function ($scope, $http) {
    $scope.gridOptions = {};
    $scope.gridOptions2 = {};
    $http.get('/Default/GetStudents/').then(function (d) {
        $scope.gridOptions.data = d.data;
        console.log(gridOptions.data);
        $scope.checkSelection = function () {
            if ($scope.stuStelec != "" && $scope.stuStelec != undefined) {

                $http.get('/Courses/GetCourses/' + $scope.stuStelec).then(function (a) {
                    $scope.gridOptions2.data = a.data;
                    console.log(gridOptions2.data);
                }, function (a) {
                    alert(a.data);
                });
            }
            else
                $scope.msg = 'Please Select a student';
        }
    }, function (d) {
        alert(d.data);
    });
}]);

HTML

<div style="padding-left:30%" ng-controller="StudentController">
    <div class="row">
        <h6 style="padding-right:2%; font-size:24px;">Select student: </h6>

        <ui-select ng-model="stuStelec.selected" theme="bootstrap">
            <ui-select-match placeholder="Enter a name...">
                {{$select.selected.name}}
            </ui-select-match>
            <ui-choices class="ui-select-choices" repeat="x in gridOptions.data | filter: $select.search">
                {{x.Name}} {{x.Surname}}
            </ui-choices>
        </ui-select>

        @* === AT FIRST TIME THIS WAS WORKING

        <select style="padding-right:2%" name="students" class="custom-select" ng-model="stuStelec">
            <option value="" disabled selected hidden>Please Select...</option>
            <option ng-repeat="x in gridOptions.data" value="{{x.id}}">{{x.Name+" "+x.Surname}}</option>
        </select>
        <input type="button" value="Select" ng-click="checkSelection()" />
        *@

    </div><br /><br />
    <div id="grid1" ui-grid="gridOptions2" class="grid"></div>
    <span style="color:red">{{msg}}</span>
</div>

我在控制台中收到此错误：

TypeError: Cannot set property 'gridOptions' of undefined
    at Object.<anonymous> (AppJs.js:3)
    at Object.invoke (angular.js:5093)
    at $controllerInit (angular.js:11138)
    at nodeLinkFn (angular.js:10009)
    at compositeLinkFn (angular.js:9350)
    at compositeLinkFn (angular.js:9353)
    at publicLinkFn (angular.js:9215)
    at angular.js:1928
    at Scope.$eval (angular.js:18816)
    at Scope.$apply (angular.js:18915)

Answer 1

尝试从这里更改 angularJS 代码的第二行：

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

到这里：

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

尽管我不记得这背后的解释 - 自从我读到它已经有一段时间了 - 如果我在函数定义之前删除表示注入的实际字符串，我的代码将会中断。

编辑：来自 angularJS 的开发者指南

内联数组注解

这是注释应用程序组件的首选方式。这是 文档中的示例是如何编写的。

例如：

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

这里我们传递一个数组，它的元素由一个字符串列表组成（ 依赖项的名称）后跟函数本身。

使用此类注解时，注意保留注解 数组与函数声明中的参数同步。

找到这个：Inline Array Annotation - Why two $scopes are used for this code [duplicate]

希望对您有所帮助。