如何在智能表上使用复选框过滤器?

时间:2017-12-15 09:16:18

标签: javascript angularjs

如何在智能表上使用复选框过滤器? 这是我的代码,当用户单击复选框时,它只显示firstName is'Sam'记录。这是我的代码:

angular.module('smarttabledemo', ['smart-table']).run(function() {
  console.clear();
})
.controller('smarttabledemo', function($scope) {
  $scope.data = [
    { firstName: 'Sam', lastName: 'Evans', phone: 'Not Provide', hometown: 'Anytown, ST' },
    { firstName: 'Saul', lastName: 'Evans', phone: '555-555-1234', hometown: 'Anytown, ST' },
    { firstName: 'Charlie', lastName: 'Anders', phone: '555-555-9876', hometown: 'Springfield, ST' },
    { firstName: 'Jessica', lastName: 'Cortez', phone: 'Not Provide', hometown: 'Springfield, ST' },
    { firstName: 'Amy', lastName: 'Wood', phone: '555-555-1348', hometown: 'Metroville, ST' },
  ]
})


<div class='container' ng-app='smarttabledemo' ng-controller='smarttabledemo'>
  <h3>Minimal Angular/Smart-Table Demo</h3>
  <table st-table='data' class='table'>
    <thead>
      <tr>
        <th colspan='999'>
          <input st-search class='form-control' type='search' placeholder='Search' ng-model='search' />
        </th>
      </tr>
      <tr>
        <th st-sort='firstName'>First Name</th>
        <th st-sort='lastName'>Last Name</th>
        <th st-sort='phone'>Phone Number</th>
        <th st-sort='hometown'>Hometown</th>
      </tr>
    </thead>
    <tbody>
      <tr st-select-row='row' ng-repeat='row in data'>
        <td>{{row.firstName}}</td>
        <td>{{row.lastName}}</td>
        <td>{{row.phone}}</td>
        <td>{{row.hometown}}</td>
      </tr>
    </tbody>
  </table>
</div>

我尝试使用以下代码进行过滤,但没有成功。

  Just Show Sam:  <input st-search="firstName" ng-model="a" type="checkbox" ng-true-value="'Sam'" ng-false-value="''" value="{{a}}"> 

Fiddle

1 个答案:

答案 0 :(得分:0)

你可以像ng ng-repeat='row in tableData | filter:a'那样在ng-repeat中传递过滤器选项,并设置复选框的值&#34; Sam&#34;喜欢这个<input st-search="firstName" ng-model="a" type="checkbox" ng-true-value="'Sam'" ng-false-value="''" value="Sam">你更新的小提琴Link