Angularjs ui-grid从文本输入字段中过滤

Question

也许有人可以帮我解决一个小问题.我是网络编程领域的新手,但我有编程经验.我想开发一个使用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);
//            }
//        });

我们的想法是拥有一个包含搜索字段的导航栏.后来我想根据其他列上的rangeliders进行过滤.但是,即使标准字符串过滤在我的示例中也不起作用.

问题:

1. 有人能告诉我当前的问题在哪里吗？更具体地说:为什么外部输入字段的过滤不起作用？
2. 另一个问题是如何将范围滑块的最小值和最大值绑定到例如我的示例中的年龄列？(与问题中的约束问题直接相关(1))

我环顾四周寻找答案,但要么这直接是我无法掌握的绑定问题,仅仅是编程js问题,还是ug-grid问题的ngGrid更新.

非常感谢提前

Answer 1

对于你的第一个问题的答案,他们还没有真正为UI-Grid做出全局搜索选项,所以你必须做一些工作.列过滤器工作的当前方式是角度监视列过滤器输入字段以进行更改,当您在框中键入时,它会刷新其过滤器.因此,除非您强制此输入框触发更改事件,否则您的过滤器将不适用.解决方法是简单地过滤数据并重新加载.例如:

在HTML输入搜索框中,添加刷新

<input ng-model="searchText" ng-change="refreshData()" placeholder="Search...">

然后在你的app.js

$scope.refreshData = function() {
  $scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText);
};

哦,不要忘记在控制器中包含$ filter

app.controller('myController', function($scope, $filter) {}

我分叉你的例子并用这种解决方法修改它.在这里查看:http: //plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr？p =preview