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）中的约束问题直接相关）

我环顾四周寻找答案，但这或者直接是我无法掌握的绑定问题，仅仅是编程js问题，或者是ug-grid问题的ngGrid更新。

提前多多感谢

Answer 1

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

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

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

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

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

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

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

我希望它有效......

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

2 个答案: