20

多分誰かがちょっとした問題で私を助けることができます。私は Web プログラミングの分野ではかなり新しいですが、プログラミングの経験はあります。angularjs と ui-grid を使用する小さな Web サイトを開発したいと考えています。残念ながら、フィルタリングは外部入力フィールドからは機能していません。

プログラミングのバグがどこにあるのか誰か教えてください。

コードはここにあります: 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);
//            }
//        });

アイデアは、検索フィールドを含むナビゲーション バーを持つことです。後で、さらに列の rangesliders に応じてフィルタリングしたいと思います。ただし、標準の文字列フィルタリングでさえ、私の例では機能しません。

質問:

  1. 誰かが私の現在の問題がどこにあるのか教えてもらえますか? 具体的には、外部入力フィールドからのフィルタリングが機能しないのはなぜですか?
  2. もう 1 つの質問は、レンジ スライダーの最小値と最大値をたとえば私の例の age 列にバインドするにはどうすればよいかということです。（問題のバインディングの問題（1）に直接関係します）

私は答えを探しましたが、これは私が把握できないバインディングの問題、単なるプログラミング js の問題、または ui-grid の問題への ngGrid の更新のいずれかです。

事前にどうもありがとう

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 に答える