admin管理员组

文章数量:1023263

Here is the working plunk , which deals with directly binding the gridAPi to the html. However, I am trying to do the same using a select box, but that doesn't work.

Directly Binding the Grid Api to view works 

<div ng-controller="MainCtrl">This Filter works
    <input type="text" ng-model="gridApi.grid.columns[2].filters[0].term" />
     <div ui-grid="gridOptions" class="my-grid"></div>
</div>

But then in controller if I trigger 

 $scope.gridApi.grid.columns[0].filters[0].term=30;

The Grid Api doesn't filter the grid when triggered externally.

Error Plunk

What am I missing?

Here is the working plunk , which deals with directly binding the gridAPi to the html. However, I am trying to do the same using a select box, but that doesn't work.

Directly Binding the Grid Api to view works 

<div ng-controller="MainCtrl">This Filter works
    <input type="text" ng-model="gridApi.grid.columns[2].filters[0].term" />
     <div ui-grid="gridOptions" class="my-grid"></div>
</div>

But then in controller if I trigger 

 $scope.gridApi.grid.columns[0].filters[0].term=30;

The Grid Api doesn't filter the grid when triggered externally.

Error Plunk

What am I missing?

  • javascript
  • angularjs
  • angular-ui-grid
Share Improve this question asked Feb 3, 2016 at 11:09 IncpetorIncpetor 1,3036 gold badges25 silver badges46 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

Well, I went in and played with a few things in your plunker before I realized that you had put the ng-controller attribute on the <div> above your <select>/<option> group, so your selected values weren't within the scope of the controller.

When I moved the ng-controller attribute back out to the <body> tag instead, the filterGrid() function worked. I also took the liberty of adding in a $watcher on the selected value, which updates the $scope.gridApi.grid.columns[0].filters[0].term value when changed, if you'd prefer to filter on the fly rather than by clicking the button. Whatevs.

Anyway, here's the working plunker, and the choicest bits reproduced below:

<body ng-controller="MainCtrl">

    <div>This Filter works <!-- took the ng-controller attr out of this div tag -->
        <input type="text" ng-model="gridApi.grid.columns[0].filters[0].term" />
        <div ui-grid="gridOptions" class="my-grid"></div>
    </div>

    <p>Now this does, too!</p>
    <select ng-model="filterTerm">
        <option value="30">30</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="20">20</option>
    </select>

    <input type="button" value="Filter Grid Content" ng-click="filterGrid(filterTerm)">
    ...
</body>

and the controller script:

    $scope.filterTerm;

    // Watching the value of $scope.filterTerm also works, 
    // as you can unment and see below, but I left the 
    // ng-click functionality from your original plunker

    // $scope.$watch(function() {return $scope.filterTerm; }, function(newVal) {
    //     if (newVal) {
    //         console.log('filter term updated to ' + JSON.stringify(newVal));
    //         $scope.gridApi.grid.columns[2].filters[0].term = newVal;
    //     }
    // });

    $scope.filterGrid = function(value) {
        console.log(value);
        $scope.gridApi.grid.columns[2].filters[0].term=value;
    };

Here is the working plunk , which deals with directly binding the gridAPi to the html. However, I am trying to do the same using a select box, but that doesn't work.

Directly Binding the Grid Api to view works 

<div ng-controller="MainCtrl">This Filter works
    <input type="text" ng-model="gridApi.grid.columns[2].filters[0].term" />
     <div ui-grid="gridOptions" class="my-grid"></div>
</div>

But then in controller if I trigger 

 $scope.gridApi.grid.columns[0].filters[0].term=30;

The Grid Api doesn't filter the grid when triggered externally.

Error Plunk

What am I missing?

Here is the working plunk , which deals with directly binding the gridAPi to the html. However, I am trying to do the same using a select box, but that doesn't work.

Directly Binding the Grid Api to view works 

<div ng-controller="MainCtrl">This Filter works
    <input type="text" ng-model="gridApi.grid.columns[2].filters[0].term" />
     <div ui-grid="gridOptions" class="my-grid"></div>
</div>

But then in controller if I trigger 

 $scope.gridApi.grid.columns[0].filters[0].term=30;

The Grid Api doesn't filter the grid when triggered externally.

Error Plunk

What am I missing?

  • javascript
  • angularjs
  • angular-ui-grid
Share Improve this question asked Feb 3, 2016 at 11:09 IncpetorIncpetor 1,3036 gold badges25 silver badges46 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

Well, I went in and played with a few things in your plunker before I realized that you had put the ng-controller attribute on the <div> above your <select>/<option> group, so your selected values weren't within the scope of the controller.

When I moved the ng-controller attribute back out to the <body> tag instead, the filterGrid() function worked. I also took the liberty of adding in a $watcher on the selected value, which updates the $scope.gridApi.grid.columns[0].filters[0].term value when changed, if you'd prefer to filter on the fly rather than by clicking the button. Whatevs.

Anyway, here's the working plunker, and the choicest bits reproduced below:

<body ng-controller="MainCtrl">

    <div>This Filter works <!-- took the ng-controller attr out of this div tag -->
        <input type="text" ng-model="gridApi.grid.columns[0].filters[0].term" />
        <div ui-grid="gridOptions" class="my-grid"></div>
    </div>

    <p>Now this does, too!</p>
    <select ng-model="filterTerm">
        <option value="30">30</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="20">20</option>
    </select>

    <input type="button" value="Filter Grid Content" ng-click="filterGrid(filterTerm)">
    ...
</body>

and the controller script:

    $scope.filterTerm;

    // Watching the value of $scope.filterTerm also works, 
    // as you can unment and see below, but I left the 
    // ng-click functionality from your original plunker

    // $scope.$watch(function() {return $scope.filterTerm; }, function(newVal) {
    //     if (newVal) {
    //         console.log('filter term updated to ' + JSON.stringify(newVal));
    //         $scope.gridApi.grid.columns[2].filters[0].term = newVal;
    //     }
    // });

    $scope.filterGrid = function(value) {
        console.log(value);
        $scope.gridApi.grid.columns[2].filters[0].term=value;
    };

本文标签： javascriptAngular UIGrid External FilteringStack Overflow

版权声明：本文标题：javascript - Angular UI-Grid External Filtering - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745582528a2157394.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。