如何使用的SelectionMode： '多'，displaySelectionCheckbox：在angularjs智能表

Question

http://lorenzofox3.github.io/smart-table-website/#/section-selection

真正性能如何使用智能表selectionMode: 'multiple'，displaySelectionCheckbox: true性能。有什麼要求？

Answer 1

假設我們在html中有下表。您應該創建下面的指令（你可以把在一個分隔的文件形成控制器）：

<table st-table="rowCollection" class="table"> 
    <thead> 
    <tr> 
     <th></th> 
     <th st-sort="firstName">first name</th> 
     <th st-sort="lastName">last name</th> 
     <th st-sort="birthDate">birth date</th> 
     <th st-sort="balance">balance</th> 
     <th>email</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="row in rowCollection"> 
     <td cs-select="row"></td> 
     <td>{{row.firstName | uppercase}}</td> 
     <td>{{row.lastName}}</td> 
     <td>{{row.birthDate | date}}</td> 
     <td>{{row.balance | currency}}</td> 
     <td><a ng-href="mailto:{{row.email}}">email</a></td> 
    </tr> 
    </tbody> 
</table> 


    app.controller('customCtrl', ['$scope', function (scope) { 
     scope.rowCollection = [ 
      {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'}, 
      {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'}, 
      {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'} 
     ]; 
    }]); 
    app.directive('csSelect', function() { 
     return { 
      require: '^stTable', 
      template: '<input type="checkbox"/>', 
      scope: { 
       row: '=csSelect' 
      }, 
      link: function (scope, element, attr, ctrl) { 

       element.bind('change', function (evt) { 
        scope.$apply(function() { 
         ctrl.select(scope.row, 'multiple'); 
        }); 
       }); 

       scope.$watch('row.isSelected', function (newValue, oldValue) { 
        if (newValue === true) { 
         element.parent().addClass('st-selected'); 
        } else { 
         element.parent().removeClass('st-selected'); 
        } 
       }); 
      } 
     }; 
    });