AngularJS对点击的span元素进行过滤,从表中删除数据

a5g8bdjr  于 6个月前  发布在  Angular
关注(0)|答案(1)|浏览(69)

在下面的codepen中,我尝试在ng-repeat属性中使用筛选器,以根据单击的span元素或在搜索文本框中输入的文本进行筛选。我使用一个表显示故障单数据,其中包含列ID、Ticket Description、Ticket Status和Edit。
问题是,当您单击打开或关闭范围时,它会工作,但所有范围的作用与其意图相反。所有范围应该显示所有行。尝试在搜索框中进行筛选也会删除所有数据。
如何在单击“全部”跨度并启用文本框中的搜索时显示所有数据。我使用“filter:searchText:true:Status”的原因是因为有时在另一列(票据描述列)中有像Open和Closed这样的单词。我一直在阅读filter documentation,但仍然不知道如何实现这一点。谢谢。

<div class="container" ng-app="myApp" ng-controller="myController">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-6 my-auto">
          <span ng-repeat="tab in tabs" ng-click="update(tab.value)">{{tab.label}}</span>
        </div>
        <div class="col-6 my-auto">
          <label class="my-auto float-right">Search:
            <input ng-model="searchText">
          </label>
        </div>
      </div>
      <div class="row table-responsive">
        <table id="searchTextResults" class="table table-striped">
            <tr>
                <th ng-click="sortBy('ID')">ID</th>
                <th ng-click="sortBy('Description')">Ticket Description</th>
                <th ng-click="sortBy('Status')">Ticket Status</th>
              <th>Edit</th>
            </tr>
          <tr>
                        <tr ng-repeat="ticket in tickets | filter:searchText | filter:searchText:true:Status | orderBy:sortField:reverseOrder">
              <td><a href="#">{{ticket.ID}}</a></td>
              <td><a href="#">{{ticket.Description}}</a></td>
              <td><a href="#">{{ticket.Status}}</a></td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
            </tr>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

字符串
部分AngularJS代码

$scope.tabs = [ 
   { value: '', label: 'All' }, 
   { value: 'Open', label: 'Open'},
   { value: 'Closed', label: 'Closed'}
 ]; 
    
 $scope.update = function(filterText) {
      $scope.searchText = filterText;
 }

dwbf0jvd

dwbf0jvd1#

因此,这对搜索栏不起作用的原因是因为**:true:**段使其执行严格的equalTo搜索。为了解决这个问题。创建两个不同的过滤器变量。一个用于直接应用于状态的严格搜索。另一个用于搜索字段。您需要将ng-model重新绑定到var 2。

ng-model="var2"

字符串
第一个月
filter:searchText:true:Status
结果如下:

ticket in tickets | filter:var2 | filter:searchText:true:Status | orderBy:sortField:reverseOrder


然后在js方面,我会有点懒惰,只是添加代码。

$scope.var2="";
$scope.tabs = [ 
   { value: undefined, label: 'All' }, 
   { value: 'Open', label: 'Open'},
   { value: 'Closed', label: 'Closed'}
 ];

相关问题