我试图在与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)
答案 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]
希望有帮助。