使用angularjs在ui-grid中单击行上的复选框答案

【问题标题】：select checkbox on row click in ui-grid using angularjs使用angularjs在ui-grid中单击行上的复选框
【发布时间】：2016-05-30 13:57:48
【问题描述】：

我是 Angular js 的新手。当我单击该行以编辑该特定单元格时，我想选中该复选框。我已采用单元格模板在 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>

【问题讨论】：

标签： javascript html angularjs checkbox

【解决方案1】：

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

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

这是另一个关于 rowSelectionChanged 功能的帖子angular ui-grid event: row selected

【讨论】：

感谢您的大力帮助。我将完成教程。