Question

我是角色的新手，我一直试图将自定义复选框绑定到对象上。

我创建了一个plnkr来说明问题。基本上我想要尝试获取复选框以通过行的ID更改复选框对象。理想情况下，复选框将匹配排序或过滤后的行，而不是当前正在执行的行。目前，我根本不认为它会更新复选框对象。

http://plnkr.co/edit/M42gzWlulwCLmmy3VHaZ?p=preview

知道cellTemplate复选框如何更新vm.checkbox并正确跟踪？

var app = angular.module('app', ['ui.grid','ui.grid.selection', 'ui.grid.pagination']);
    app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, $uiGridConstants) {  

  var vm = this;
  vm.checkboxes = {
    '1': false,
    '2': false,
    '3': false,
    '4': false,
    '5': false
  };

  $scope.columns = [ {
    field: 'controls',
    name:'controls',
    cellTemplate:'<input type="checkbox" ng-model="vm.checkboxes[row.entity.id]"/>'
  },{
    name: 'Id',
    field: 'id'
  }, {
    name: 'First Name',
    field: 'firstName'
  }, {
    name: 'Last Name',
    field: 'lastName'
  }];

  $scope.gridOptions = {
    enableRowSelection: true,
    enableSorting: true,
    rowHeight: 35,
    multiSelect: false,
    columnDefs: $scope.columns
  };

  $scope.gridOptions.data = [{
    "id": "1",
    "firstName": "John",
    "lastName": "Joe"
  }, {
    "id": "2",
    "firstName": "Anna",
    "lastName": "Joe"
  }, {
    "id": "3",
    "firstName": "Peter",
    "lastName": "Haines"
  }, {
    "id": "4",
    "firstName": "Robert",
    "lastName": "Jones"
  }, {
    "id": "5",
    "firstName": "Bob",
    "lastName": "Builder"
  }];

  $scope.$watch("vm.checkboxes",function(current,old) {
                if(current || old) console.log(vm.checkboxes);
  });
}]);

<body ng-controller="MainCtrl">
<div>
  <br />
  <br />
  <div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="script.js"></script>

angularjs uigrid复选框跟踪

0 个答案: