如何使用angularjs获取ui-grid单元格中的选定复选框值

时间:2016-05-05 14:06:45

标签: angularjs gridview angular-ui-grid checkboxlist

我在UI-grid内置angularjs我使用了哪个单元格模板复选框。当我点击特定复选框时,我想获得该复选框值,意味着我有类似于结构的表格表格单元格我有复选框。现在我想获取所选的复选框值。

这是我的代码

$scope.gridOptionsNew = {
appScopeProvider : $scope,
columnDefs : [{
        enableCellEdit : false,
        field : 'SponsorType',
        displayName : me.labelText.ADD_STORY_TABLE_SPONSOR_TYPE

    }, {
        //enableCellEdit: true,
        field : 'Hoarding',
        displayName : me.labelText.ADD_STORY_TABLE_HOARDING,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    },
    {
        //enableCellEdit: true,
        field : 'Print',
        displayName : me.labelText.ADD_STORY_TABLE_PRINT,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Radio',
        displayName : me.labelText.ADD_STORY_TABLE_RADIO,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'StageBackDrops',
        displayName : me.labelText.ADD_STORY_TABLE_STAGE_BACK_DROP,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Stalls',
        displayName : me.labelText.ADD_STORY_TABLE_STALLS,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Banners',
        displayName : me.labelText.ADD_STORY_TABLE_BANNERS,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Seats',
        displayName : me.labelText.ADD_STORY_SEATS,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'VenueBanners',
        displayName : me.labelText.ADD_STORY_VENUE_BRANDING,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'StagePresence',
        displayName : me.labelText.ADD_STORY_STAGE_PRESENCE,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }
]}

$scope.yourMethod = function (radio) {
  console.log("value", radio);
};

1 个答案:

答案 0 :(得分:0)

请尝试如下所示。

设置网格选项,例如:

 $scope.gridOptionsNew = { 
         appScopeProvider: $scope,
         //your other options

然后是模板:

cellTemplate: '<div class="text-center"><input type="checkbox" '+
name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'

方法:

     //your Method
      $scope.yourMethod = function (radio) {

        //your logic
      };

更新:

cellTemplate: '<div class="text-center"><input type="checkbox" '+
name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity)"/></div>'