javascript - angular1 - uigridconstants filter




Angularjs ui-grid 텍스트 입력 필드의 필터 (2)

귀하의 첫 번째 질문에 대한 답변, 그들은 아직 UI ​​그리드에 대한 글로벌 검색 옵션을 아직 만들지 않았으므로 약간의 작업을해야합니다. 열 필터가 현재 작동하는 방식은 변경 사항에 대한 열 필터 입력 필드를 각도로보고 상자에 입력하면 해당 필터를 새로 고칩니다. 이 입력란에 변경 이벤트를 발생시키지 않으면 필터가 적용되지 않습니다. 해결 방법은 단순히 데이터를 필터링하고 다시로드하는 것입니다. 예 :

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

어쩌면 누군가가 약간의 문제로 나를 도울 수 있습니다. 나는 웹 프로그래밍 분야에서 새롭다. 그러나 프로그래밍 경험이있다. 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 문제 또는 ui-grid 문제에 대한 ngGrid 업데이트의 문제입니다.

많은 감사드립니다


이 시도:

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

나는 그것이 효과가 있기를 바란다. ..







angular-ui-grid