AngularJs使用ui选择“无法设置未定义的属性'gridOptions'”

时间:2019-04-12 19:46:13

标签: javascript angularjs angular-ui-grid ui-grid ui-select

我试图在与angularJS的ui-select一起使用的下拉菜单中从数据库中获取数据,然后单击一个按钮以在ui-grid中显示以下与所选项目相关的数据。

我尝试使用选择标签选项,它工作正常。之后,我尝试使用ui-select和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)

1 个答案:

答案 0 :(得分:0)

尝试从此更改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]

希望有帮助。