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?
Share Improve this question asked Feb 3, 2016 at 11:09 IncpetorIncpetor 1,3036 gold badges25 silver badges46 bronze badges1 Answer
Reset to default 4Well, 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;
};
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745582530a4634339.html
评论列表（0条）