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();
}

Я надеюсь, что это сработает...