0
当用户搜索数据时，没有任何与搜索文本框相关的数据会在清除文本框后显示“No Data Found” “找不到数据tr”。 我使用keyup事件中，如果表长度为“0”，那么我不得不追加TR在未找到资料与appendNoRecord类，明确的搜索框后，如何删除TR找不到数据请帮助我。下面的图像删除tr“找不到数据”。点击以下链接，打开的jsfiddle代码当类名称（appendNoRecord）存在时如何从表格中删除tr其他wist未删除
angular.module("app", [])
.controller('filterController', ['$scope', '$document',
function($scope, $document) {
$scope.employees = [{
name: "Stewart",
age: "25",
phoneNumber: "563544466"
}, {
name: "Stone",
age: "34",
phoneNumber: "657865856"
}, {
name: "Grudin",
age: "27",
phoneNumber: "679423435"
}, {
name: "Drucker",
age: "25",
phoneNumber: "343667789"
}, {
name: "Davis",
age: "44",
phoneNumber: "456724423"
}, {
name: "Crowfoot",
age: "35",
phoneNumber: "789345564"
}, {
name: "Confucius",
age: "26",
phoneNumber: "243567333"
}, {
name: "Burnett",
age: "50",
phoneNumber: "879344666"
}];
$scope.sortColumn = "name";
$scope.reverseSort = false;
$scope.sortData = function(column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function(column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'arrow-down' : 'arrow-up'
}
}
$scope.keySearch = function() {
var element = angular.element($document[0].querySelector('#tablesorter'));
var that = element.find('tbody').find('tr');
if (that.length == 0) {
element.find('tbody').append('<tr><td colspan="4" class="appendNoRecord" align="center" width="100%">No Records Found</td></tr>');
} else {
angular.forEach(that, function(value, index) {
if (this.hasClass('appendNoRecord')) {
debugger;
}
})
}
}
}
]);
angular.bootstrap(document, ['app']);/*This class displays the UP arrow*/
.arrow-up {
background: url(../Images/desc.gif);
background-repeat: no-repeat;
background-position: right center;
background-color: #C7DF65;
}
/*This class displays the DOWN arrow*/
.arrow-down {
background: url(../Images/asc.gif);
background-repeat: no-repeat;
background-position: right center;
background-color: #C7DF65;
}
/*Sorting default Arrows*/
table th {
background: url(../Images/bg.gif);
background-repeat: no-repeat;
background-position: right center;
text-align: center;
background-color: #C7DF65;
}
/*Fixed table header with scrolling tbody*/
.table-fixed thead {
width: 100%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead > tr > th {
float: left;
border-bottom-width: 0;
}
.table > thead > tr:after,
.table > tbody > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
/*Fixed table header with scrolling tbody*/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-controller="filterController">
<div class="container">
<div class="row">
<div class="col-lg-12 text-right" style="margin-top:10px;">
Search
<input type="text" ng-model="SearchFilter" ng-keyup="keySearch()" />
</div>
</div>
<table class="table table-fixed table-striped" id="tablesorter" style="margin-top:20px;">
<thead>
<tr>
<th ng-click="sortData('name')" ng-class="getSortClass('name')" class="col-xs-3">Name
</th>
<th ng-click="sortData('age')" ng-class="getSortClass('age')" class="col-xs-3">Age
</th>
<th ng-click="sortData('phoneNumber')" ng-class="getSortClass('phoneNumber')" class="col-xs-3">Phone Number
</th>
<th class="col-xs-3">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | filter: SearchFilter | orderBy: sortColumn:reverseSort">
<td class="col-xs-3">{{ emp.name }}
</td>
<td class="col-xs-3">{{ emp.age }}</td>
<td class="col-xs-3">{{ emp.phoneNumber }}</td>
<td class="col-xs-3">
<input type="submit" class="btn btn-primary btn-xs" name="Edit" />
<input type="submit" name="name" class="btn btn-danger btn-xs" value="Delete" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
jsfiddle.net/Mittudev/0ra2chhz/12/这是链接我的全部代码。 Fiddler链接不起作用 – Devasish