20

也许有人可以帮我解决一个小问题。我是网络编程领域的新手，但我有编程经验。我想开发一个使用 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. 有人能告诉我我目前的问题在哪里吗？更具体地说：为什么来自外部输入字段的过滤不起作用？
  2. 另一个问题是如何将范围滑块的最小值和最大值绑定到例如我的示例中的年龄列？（与问题（1）中的绑定问题直接相关）

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

非常感谢提前

4

2 回答 2

19

第一个问题的答案是，他们还没有真正为 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

于 2015-02-13T22:03:47.903 回答
3

尝试这个：

$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="Search...">

$scope.refresh = function()
{
    $scope.gridApi.core.refresh();
}

我希望它有效...

于 2015-06-09T06:20:59.813 回答