web-dev-qa-db-ja.com

テキスト入力フィールドからのAngularjs UI-Gridフィルター

誰かが小さな問題で私を助けることができるかもしれません。私はWebプログラミングの分野ではかなり新しいですが、プログラミングの経験はあります。 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の問題、またはui-gridの問題へのngGridの更新のいずれかです。

事前に感謝します

javascriptangularjsangular-ui-grid
20
cojack20

最初の質問に対する答えは、彼らはまだUI-Gridのグローバル検索オプションをまだ作成していないので、少し回避する必要があります。列フィルターが機能する現在の方法は、angular列フィルターの入力フィールドの変更を監視し、ボックスに入力するとフィルターを更新します。この入力ボックスに強制的に変更イベントを発生させる回避策は、単にデータをフィルタリングしてリロードすることです。

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

18
Dannzzor

これを試して：

_$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();
}
_

うまくいくことを願っています...

3
Tairman