Question

我在AngularJS中使用SmartTable来显示记录列表。

问题是每当用户按id过滤数据，并使用复选框选择行时，现在再次执行相同操作但不删除在搜索文本框中搜索的值，然后在提交数据时它只选择最后一个，因为对象已被过滤有这个价值。但我也想要所有选择的先前记录。

如果我们在提交表单之前删除过滤器可以解决问题，但不知道该怎么做。

Html代码

<body ng-controller="MainCtrl">

 <table class="table table-striped table-bordered" st-table="employees">
<tr>
   <td>Select Column</td>
   <td>id <input st-search="id" class="input-sm form-control" type="search" placeholder="id" /></td> 
   <td>name</td> 
   <td>address</td> 
   <td>classA</td>
   <td>classB</td>
 </tr>  
<tr ng-repeat="employee in employees">
    <td><input type="checkbox" ng-model="row.checked"></td>
    <td>{{employee.id}}</td>
    <td>{{employee.name}}</td>
    <td>{{employee.address}}</td>
    <td><input type="checkbox" ng-model="employee.classA"></td>
    <td><input type="checkbox" ng-model="employee.classB"></td>
</tr>
</table>
<input type="button" name="save" value="submit" ng-click="submit()">

JS

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {

    $scope.employees = [
        { id:"1", name: "A",              address: "A1",    classA: true,  classB: true  },
        { id:"2", name: "B",            address: "A2",    classA: false, classB: true  },
        { id:"3", name: "C",            address: "A3",    classA: true, classB: false  },
        { id:"4", name: "D",             address: "A4",   classA: false, classB: true  },
        { id:"5", name: "E",             address: "A5",   classA: false, classB: true  },
    ];  


  $scope.submit = = function () {
    var ar = $scope.employees.filter(
      function (value) {
        if (value.checked) {
          return true;
        } else {
          return false;
        }
    });
   // Selected Data
    console.log(ar);
  };


    });

Answer 1

1。在您的js文件中，更改

var app = angular.module('myApp', []);

到

var app = angular.module('myApp', ['smart-table']);

您忘记将smart-table模块注入您的应用程序。

2。在您的HTML文件更改

<input type="checkbox" ng-model="row.checked">

到

<input type="checkbox" ng-model="employee.checked">

在您的提交功能中，您按＆＃34;过滤＆＃34;每个员工对象中的属性，而不是行对象

3。您应该意识到，智能表将行过滤为使用带有过滤器的普通ng-repeat的角度过滤器。当你过滤掉一个表格中的一行（或者ng-repeat中的任何其他内容）时，它会从你的表格中删除，就好像你已经用ng-if一样，所以如果你选择一行，那么过滤它，然后点击提交，您的console.log函数不会显示该对象，因为它不再是您的表格行集合的一部分。

要避免这种情况，请使用stSafeSrc指令。

<table st-table="displayedCollection" st-safe-src="rowCollection">

＆＃34; rowCollection＆＃34; ＆＃34; displayedCollection＆＃34;将在原始数据中保存原始数据的副本。将在视图的表格中看到，然后在原始数据上使用filter + submit

我的代码中出现了一个plunk，它显示了我的意思。

重置/删除对象上的samrtTable过滤器

Html代码

JS

1 个答案: