javascript - 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);
//            }
//        });

这个想法是有一个包含搜索字段的导航栏。稍后我想根据其他列上的范围 slider 进行过滤。然而，即使是标准字符串过滤在我的示例中也不起作用。

问题:

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

我四处寻找答案，但这要么是我无法掌握的直接绑定(bind)问题，要么是纯粹的编程 js 问题，要么是 ngGrid 更新到 ui-grid 问题。

提前非常感谢

Answer 1

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

在 HTML 输入搜索框中添加刷新<​​/p>

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

然后在你的app.js中

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

哦，别忘了在你的 Controller 中包含 $filter

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

我 fork 了您的示例并使用此解决方法对其进行了修改。在这里查看: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview