angularjs - AngularJS 中的多个过滤器,带有文本和单选按钮
问题描述
我正在桌子上做一个搜索模块。表格上的搜索(文本字段)正在工作。表格的列标题也有同样的排序。
我想在搜索文本字段下添加单选按钮以改进我的搜索(添加过滤器)。因此搜索将基于为所选字段输入的文本。
这是我的看法:
<div class="spacer input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
<input type="text" ng-model="searchText" class="form-control" placeholder="Search name..." ng-change="search(searchText)"/>
<div class="input-group-btn">
<button class="btn btn-default" ng-click="razRecherche()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
<div>
<div>HERE THE RADIO BUTTONS</div>
</div>
<div class="table-responsive" id="allContacts">
<table ng-show="contacts.length" class="table table-striped table-hover spacer">
<thead>
<tr>
<th class="colPerson">
<a href="" ng-click="personsSort('PERSON')">Person</a>
<span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span>
</th>
<th class="colCompany">
<a href="" ng-click="personsSort('COMPANY')">Company</a>
<span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span>
</th>
<th class="colDescription">
<a href="" ng-click="personsSort('REQUESTDESCRIPTION')">Description</a>
<span class="hSpacer" ng-class="cssChevronsTri('REQUESTDESCRIPTION')"></span>
</th>
</tr>
</thead>
<tbody ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant">
<tr class="clickable">
<td class="colPerson" ng-click="selContact(contact,contact.ID)" ng-class="{sel:selIdx==$index}"><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td>
<td class="colCompany" ng-click="selContact(contact,contact.ID)">{{contact.COMPANY}}</td>
<td class="colDescription" ng-click="selContact(contact,contact.ID)">{{contact.REQUESTDESCRIPTION}}</td>
</tr>
</tbody>
</table>
</div>
我的控制器
app.controller('ctrlContacts', function ($scope, $timeout, ContactService){
$scope.search = function(searchText) {
$scope.reloadPreviousSearch = false;
if (!searchText.length) {
//alert("searchText empty");
}
if (searchText.length>2) {
$timeout(function () {
// RETRIEVE DATA FROM JSON OBJECT OF THE SERVER SEVICE AND A DB QUERY - OK
ContactService.fastSearch(searchText).success(function(contacts){
console.log("query fastSearch OK");
var length = contacts.length;
$scope.loading = false;
if (length == 0) {
$scope.searchButtonText = "No result";
}else {
$scope.searchButtonText = length + " results found";
}
// For the orderby date
for (var i=0; i<length; i++) {
if(contacts[i].REQUESTTRUEDATE!=""){
contacts[i].REQUESTTRUEDATE = new Date(contacts[i].REQUESTTRUEDATE.replace(/-/g,"/"));
}else{
contacts[i].REQUESTTRUEDATE=null;
}
}
$scope.contacts = contacts;
$scope.champTri='PERSON';
$scope.selIdx= -1;
$scope.selContact=function(contact,idx){
$scope.selectedContact=contact;
$scope.selIdx=idx;
window.location="#/view-contacts/" + idx;
}
$scope.isSelContact=function(contact){
return $scope.selectedContact===contact;
}
});
}, 1000);
}else{
$scope.contacts=null;
}
}
// SEARCH
$scope.searchText = null;
$scope.razRecherche = function() {
$scope.searchText = null;
$scope.contacts=null;
}
// SORT
$scope.champTri = null;
$scope.triDescendant = false;
$scope.personsSort = function(champ) {
if ($scope.champTri == champ) {
$scope.triDescendant = !$scope.triDescendant;
} else {
$scope.champTri = champ;
$scope.triDescendant = false;
}
}
$scope.cssChevronsTri = function(champ) {
return {
glyphicon: $scope.champTri == champ,
'glyphicon-chevron-up' : $scope.champTri == champ && !$scope.triDescendant,
'glyphicon-chevron-down' : $scope.champTri == champ && $scope.triDescendant
};
}
});
我正在尝试添加用于从文本字段中输入的文本中过滤表格的单选按钮。但是我的过滤器不起作用。
你能帮我用单选按钮在文本字段(searchText)上添加过滤器吗?
预先感谢您的帮助。
解决方案
如果我理解正确,您想通过单选按钮创建多个过滤器
过滤器属性需要一个对象作为参数
例如,您可以这样制作:
ng-repeat="contact in contacts | filter:{firstnameProperty:firstnameParamenter, ageProperty:ageParameter}
其中 firstnameProperty 是数组对象的属性,firstnameParameter 是变量,例如 $scope.firstnameParameter,您可以绑定到输入。
代替
ng-repeat="contact in contacts | filter:searchText
推荐阅读
- css - React Navigation - Creating a tab navigator element is not working?
- android - Xamarin Android Image cropper
- javascript - 缺少样式的附加元素
- node.js - 我如何访问 Apostrophe CMS 上页面的子页面小部件
- node.js - 在 node.js 应用程序上保持打开数据库连接是一种好习惯吗?
- assembly - 尝试打印号码时出错
- reactjs - formik表单验证不起作用reactjs
- c++ - PolyHook x64Detour 未连接到 Direct3DCreate9
- git - 使用 Nix 的 Git 时权限被拒绝(公钥)
- angular - Angular v6 - 延迟加载的路由未加载