使用angularjs选择在ui-grid上单击行的复选框

时间:2016-05-30 05:08:38

标签: javascript html angularjs checkbox

我是棱角分明的新手。当我点击该行来编辑该特定单元格时,我想选中该复选框。我已经使用了celltemplate来显示ui-grid中的复选框。但是现在当我点击该行时,行被选中但是复选框在该行未被选中。

这是我的网格 -

 $scope.myDataSocailMediaMarketing =[];
 $scope.gridOptionsSocialMediaMarketing = { 
             appScopeProvider: $scope,
             data : 'myDataSocailMediaMarketing' ,
//           enableCellSelection: true,
//           enableRowSelection: false,
             enableRowHeaderSelection :false,
             enableRowSelection: true,
             enableCellEdit: true,
             enableHorizontalScrollbar: 0,
             enableRowSelection: true,
             enableSelectAll: true,
             enableFullRowSelection : true,
             rowEditWaitInterval: -1,
             columnDefs: [
                 {
                     cellClass : 'grid-align',
                     width : '10%',
                     minWidth : '10%',
                     enableCellEdit: false,
                     field: 'select',
                     displayName: me.labelText.ADD_STORY_TABLE_SELECT,
                     cellTemplate: '<div class="ngCellText text-center">'+
                                   '<input type="checkbox" '+
                                   'ng-model="row.entity.select" '+
                                   'ng-click="grid.appScope.checkboxRowClick(row.entity)""/>'+
                                   '</div>'

                 }, 
                 {
                         cellClass : 'grid-align',
                         width : '30%',
                         minWidth : '30%',
                         enableCellEdit: false,
                         field: 'category',
                         displayName: me.labelText.ADD_STORY_TABLE_CATEGORY

                 },
                 {
                         cellClass : 'grid-align',
                         width : '60%',
                         minWidth : '60%',
                         enableCellEdit: true,
                         field: 'descriptionOrExample',
                         displayName: me.labelText.ADD_STORY_TABLE_DESCRIPTION                                       
                 }
             ],                                     
     }; 

在html中我已将其声明为 -

 <div>
 <div class="gridHeightSocialMarketing socialMediaMarketing table" ui-grid-edit ui-grid-row-edit ui-grid-selection ui-grid="gridOptionsSocialMediaMarketing" style="height:242px;">
</div>
</div>  

1 个答案:

答案 0 :(得分:0)

由于代码中没有选中复选框的代码。您必须使用 rowSelectionChanged 事件手动选中您的复选框。

请查看此tutorial,了解如何使用 rowSelectionChanged 选择或取消选中复选框。

以下是 rowSelectionChanged 功能的另一篇文章angular ui-grid event: row selected