Javascript 来自文本输入字段的Angularjs ui-grid过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26232723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs ui-grid Filter from text input field
提问by coHyman20
Maybe somebody can help me with a little problem. I am pretty new in the field of web programming, but I have programming experience. I would like to develop a small website that uses angularjs and ui-grid. Unfortunately the filtering is not working from external input fields.
也许有人可以帮我解决一个小问题。我是网络编程领域的新手，但我有编程经验。我想开发一个使用angularjs和ui-grid的小网站。不幸的是，过滤不适用于外部输入字段。
Could somebody please tell me where my programming bug is?
有人可以告诉我我的编程错误在哪里吗？
The code can be found here: http://plnkr.co/edit/fiA666OzpBqpTrCiuXER?p=preview
代码可以在这里找到：http: //plnkr.co/edit/fiA666OzpBqpTrCiuXER?p=preview
var myDummyData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
var myDummyData2 = [{name: "aTest", age: 50},
{name: "bTest1", age: 43},
{name: "cTest2", age: 27},
{name: "dTest3", age: 29},
{name: "eTest4", age: 34}];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOpts = {
data: myDummyData,
enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true
, filter: {
term: $scope.filterOptions.filterText //DOES NOT WORK... BUT WHY
}
},
{name: 'Price', field: 'age'}
]
};
$scope.updateData = function(newValue){
//console.log($scope.gridOpts.data);
console.log($scope.gridOpts.columnDefs[0].filter);
$scope.gridOpts.columnDefs[0].filter = {term: newValue};
console.log("Scope nameid set " + $scope.gridOpts.columnDefs[0].filter.term); //is set but no update
//$scope.$apply(); //not possible gives error! WHY??
//$scope.gridOpts.data = myDummyData; //for testing works
};
$scope.swapData = function () {
if ($scope.gridOpts.data === myDummyData) {
$scope.gridOpts.data = myDummyData2;
}
else {
$scope.gridOpts.data = myDummyData;
}
};
//DOES NOT WORK BUT WHY
// $scope.$watch('filterOptions.filterText', function (newValue, oldValue) {
// if ($scope.filterOptions.filterText) {
// $scope.filteringText = newValue;
// $scope.updateData(newValue);
// }
// });
The idea is to have a navigation bar that contains a search field. Later I want to filter depending on rangesliders on further columns. However not even the standard string filtering works in my example.
这个想法是有一个包含搜索字段的导航栏。后来我想根据其他列上的范围滑块进行过滤。然而，即使是标准字符串过滤在我的例子中也不起作用。
Questions:
问题：
- Could somebody tell me where my current problem is? More specifically: Why does the filtering from external input fields not work?
- The other question is how can I bind min and max values of range sliders to e.g. the age column in my example? (directly related to the binding problem in question (1))
- 有人能告诉我我目前的问题在哪里吗？更具体地说：为什么外部输入字段的过滤不起作用？
- 另一个问题是如何将范围滑块的最小值和最大值绑定到例如我的示例中的年龄列？（与问题（1）中的绑定问题直接相关）
I looked around for answers, but either this is directly a problem of the binding that I cannot grasp, a mere programming js problem, or a ngGrid update to ui-grid problem.
我环顾四周寻找答案，但这要么是我无法掌握的直接绑定问题，纯粹是编程 js 问题，要么是 ngGrid 更新到 ui-grid 问题。
Thanks a lot in advance
非常感谢提前
回答by Dannzzor
The answer to your first question, they have not really made a global search option for the UI-Grid yet, so you have to do a bit of a work around. The current way that the column filters work is angular watches the column filter input field for a change, and when you type in the box, it refreshes its filter. So your filter will not apply unless you force this input box to fire the change event. The workaround is to simply filter the data and reload. For example:
你的第一个问题的答案，他们还没有真正为 UI-Grid 提供全局搜索选项，所以你必须做一些工作。列过滤器的当前工作方式是 angular 监视列过滤器输入字段的更改，当您在框中键入时，它会刷新其过滤器。因此，除非您强制此输入框触发更改事件，否则您的过滤器将不会应用。解决方法是简单地过滤数据并重新加载。例如：
In your HTML input search box, add a refresh
在您的 HTML 输入搜索框中，添加刷新
<input ng-model="searchText" ng-change="refreshData()" placeholder="Search...">
then in your app.js
然后在你的 app.js 中
$scope.refreshData = function() {
$scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText);
};
oh, and don't forget to include $filter in your controller
哦，不要忘记在你的控制器中包含 $filter
app.controller('myController', function($scope, $filter) {}
I forked your example and modified it with this workaround. Check it out here: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview
我分叉了您的示例并使用此解决方法对其进行了修改。在这里查看：http: //plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview
回答by Tairman
try this:
尝试这个：
$scope.gridOpts = {
data: myDummyData,
enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true
, filter: {
noTerm: true,
condition: function(searchTerm, cellValue) {
return (cellValue+"" === $scope.filterOptions.filterText+"");
}
}
},
{name: 'Price', field: 'age'}
]
};
for input box: <input ng-model="searchText" ng-change="refresh()" placeholder="Search...">
对于输入框： <input ng-model="searchText" ng-change="refresh()" placeholder="Search...">
$scope.refresh = function()
{
$scope.gridApi.core.refresh();
}
I hope it works...
我希望它有效...
