如何在SmartTable angularjs

时间:2016-11-29 12:02:46

标签: javascript angularjs smart-table

我正在使用angularJS和智能表框架在html中管理我的表:

  1. 可以使用SmartTable属性选择表格行:st-select-row =“row”。
  2. 用户选择行后,单击“添加”按钮,将所选数据注册到其他列表中。
  3. 我不想从表中删除添加的行,但我确实希望它们不可选。
  4. 这是代码示例:

    HTML:

    <body ng-app="FarmManagment" ng-controller="mainCtrl">
     <table id="Table" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection">
    <thead>
      <tr>
        <th st-sort="farmName">Farm Name</th>
        <th st-sort="FarmDescription">Description</th>
        <th st-sort="DataCenter">DC</th>
      </tr>
    </thead>
    <tbody>
      <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
        <td ng-bind="row.farmName">{{row.farmName}}</td>
        <td ng-bind="row.FarmDescription"></td>
        <td ng-bind="row.DataCenter"></td>
      </tr>
    </tbody>
    </table>
     <button id="add" ng-click="add(displayedCollection)"> add </button>
     <li>
      <ul ng-bind="row.farmName" ng-repeat="row in added"></ul>
     </li>
    </body>
    

    JavaScript的:

     var app = angular.module('FarmManagment', ['smart-table']);
     app.controller('mainCtrl', function ($scope) {
    
    
    $scope.rowCollection = [
        {farmName: 'farm1', FarmDescription: 'some farm1', DataCenter: 'London'},
        {farmName: 'farm2', FarmDescription: 'some farm2', DataCenter: 'Paris'},
        {farmName: 'farm3', FarmDescription: 'some farm3', DataCenter: 'Berlin'}
    ];
    
    $scope.added = [];
    
    
    
    $scope.add = function(rows){
      angular.forEach(rows,function(row){
        if (row.isSelected === true){
          row.isSelected = false;
          var index = $scope.added.indexOf(row);
          if(index === -1){
          $scope.added.push(row);
          // row.disableSelection    this is what i want to do
          }
        }
    
      });
    };
    });
    

    如何实施此类行为?

    plunker代码:plunker

    由于 迪马

2 个答案:

答案 0 :(得分:3)

您可以添加

等条件

<tr st-select-row="isSelectableRow(row)" st-select-mode="multiple" ng-repeat="row in displayedCollection">

并在控制器中

$scope.isSelectableRow = function (row) {
  if (~$scope.added.indexOf(row))
    return false;
    return row;
}

而且,你有不正确的HTML

<li><ul>..</ul></li>

将其更改为

<ul><li>..</li></ul>

工作示例here

答案 1 :(得分:2)

可以使用st-select-row属性完成:

例如,

阻止第二行可选

<tr st-select-row="$index != 1 ? row : null" st-select-mode="multiple" ng-repeat="row in displayedCollection">

plunker