angular-ui-grid中的Celltemplate无法正常工作 [英] Celltemplate in angular-ui-grid is not working properly
问题描述
我正在使用 UI网格在我的角度应用程序中显示出勤数据我曾经用过三个选项将考勤存储在单独的数组中.
I am using UI-Grid to show data of attendance in my angular app.I have used i have three options for attendance stored in separate array.
$scope.gridOptions.data.attendance=[{'persent'},{'absent'},{'leave'}];
学生人数显示为:
$scope.gridOptions.data=students;//from ajax request
现在我想在出勤列中显示为下拉列表.
Now i want to show dropdown in attendance column as.
我也想将其显示为默认选择的选项.所以我在celltemplate中使用了ng-options,代码如下:
I also want to show the persent as default selected option.so i used ng-options in celltemplate and code is like:
$scope.gridOptions = {
columnDefs: [
{
name: "stdattendance",
displayName: "Attendance",
width: '20%',
cellClass: 'grid-align',
cellTemplate:'<select ng-model="row.entity.stdattendnce" ng-init="row.entity.stdattendnce=row.entity.attendance[0]"
ng-options="s as s.description for s in row.entity.attendance track by s.id"></select>'
}]
我面临的问题是:
1-在显示的网格中选择了默认选项,而不滚动,而在网格的下部未选择.
1-the default options persent is selected in the grid shown without scrolling while in lower part of grid it is not selected.
2-当我选择一个选项时,它也在下部的一些网格中被随机选择.
2-When i am selecting an option it is also selected in some of lower grid randomly.
我不知道这种奇怪的行为.有人在这里帮忙吗???
I can't figure out this strange behavior.will anyone help here???
推荐答案
ng-init ="row.entity.stdattendnce = row.entity.attendance [0] 错别字引起问题了吗? 帮忙看看这个会有所帮助. 这是有角度的塞子: https://plnkr.co/edit/RJZXudKJKBVIKhoxjXW0
ng-init="row.entity.stdattendnce=row.entity.attendance[0] Is the typo causing a problem? It would help to see this in a plunkr. This is the angular plunkr: https://plnkr.co/edit/RJZXudKJKBVIKhoxjXW0
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
请注意,所选选项已在范围内设置,并在模板中使用ng-model进行了标识.
Notice that the selected option is set in the scope and identified in the template using ng-model.
这篇关于angular-ui-grid中的Celltemplate无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!