Angularjs ui-grid Фильтр из поля ввода текста
Может кто-нибудь может помочь мне с небольшой проблемой. Я новичок в области веб-программирования, но у меня есть опыт программирования.
Я хотел бы разработать небольшой веб-сайт, который использует angularjs и ui-grid. К сожалению, фильтрация не работает из внешних полей ввода.
Может кто-нибудь, пожалуйста, скажите мне, где моя ошибка программирования?
Код можно найти здесь: 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);
// }
// });
Идея состоит в том, чтобы иметь панель навигации, содержащую поле поиска. Позже я хочу фильтровать в зависимости от диапазонов в последующих столбцах. Однако даже стандартная фильтрация строк не работает в моем примере.
Вопросы:
- Может ли кто-нибудь сказать мне, где моя текущая проблема? Более конкретно: почему фильтрация из внешних полей ввода не работает?
- Другой вопрос заключается в том, как я могу привязать минимальные и максимальные значения ползунков диапазона, например. возрастной столбец в моем примере? (непосредственно связанный с рассматриваемой проблемой связывания (1))
Я искал ответы на вопросы, но это напрямую связано с проблемой связывания, которую я не могу понять, просто проблемой программирования js или обновлением ngGrid для проблемы с ui-сетью.
Большое спасибо заранее
Ответы
Ответ 1
Ответ на ваш первый вопрос, они еще не сделали параметр глобального поиска для UI-Grid, поэтому вам нужно немного поработать. Текущий способ работы фильтров столбцов angular отслеживает поле ввода фильтра столбца для изменения, а при вводе в поле он обновляет свой фильтр. Таким образом, ваш фильтр не будет применяться, если вы не нажмете это поле ввода для запуска события изменения.
Обходной путь состоит в том, чтобы просто фильтровать данные и перезагружать. Например:
В поле ввода ввода HTML добавьте обновление
<input ng-model="searchText" ng-change="refreshData()" placeholder="Search...">
а затем в вашем приложении app.js
$scope.refreshData = function() {
$scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText);
};
oh, и не забудьте включить в ваш контроллер фильтр $
app.controller('myController', function($scope, $filter) {}
Я развернул ваш пример и изменил его с помощью этого обходного пути. Проверьте это здесь:
http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview
Ответ 2
попробуйте следующее:
$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'}
]
};
для поля ввода: input ng-model = "searchText" ng-change = "refresh()" placeholder = "Поиск..."
$scope.refresh = function()
{
$scope.gridApi.core.refresh();
}
Я надеюсь, что это сработает...