javascript - angularjs ui网格搜索

Question

我正在寻找有关如何实现用于搜索的简单输入文本的教程或示例在网格中。我的尝试(但 ng-keyup 需要 angularjs > 1.1.3 并且我有1.0.7)

<input type="text" ng-keyup="mySearch()" ng-model="searchText">
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
                    setTimeout(function () {
                        var data;
                        if (searchText) {
                            var ft = searchText.toLowerCase();
                            $http.get('largeLoad.json?q='+encodeURIComponent(ft)).success(function (largeLoad) {        
                                $scope.setPagingData(largeLoad,page,pageSize);
                            });            
                        } else {
                            $http.get('largeLoad.json').success(function (largeLoad) {
                                $scope.setPagingData(largeLoad,page,pageSize);
                            });
                        }
                    }, 100);
                };
$scope.mySearch = function(){
                    console.log($scope.searchText);
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage,$scope.searchText);
                }

再见

注意它是针对 json 文件的虚假请求，只是为了制作示例。

更新:我正在使用 ng-grid-1.3.2

Answer 1

基本上要解决这个问题，我认为您可以使用类似于我在下面所做的解决方案，我只是观察模型的属性以进行更改并触发一个函数来对数据集进行过滤点。

文本输入的 HTML

<input type="text" placeholder="Type to filter" ng-model="gardenModel.externalFilterText"/>

过滤数据集的 JavaScript(也包括我在服务上观察到的部分也首先更新数据，或者如果数据被刷新以重新应用过滤器)。

//This function is called every time the data is updated from the service or the filter text changes
$scope.filterGardens = function(filterText) {
  //Basically everything in this function is custom filtering specific
  //to the data set I was looking at if you want something closer to the
  //real implementation you'll probably have to dig through the source (I believe they separated the search filter code into it's own file in the original project)

  //Creating a temporary array so changes don't cause a bunch of firing of watchers
  var tempToShow = [];

  //doing case insensitive search so lower case the filter text
  filterText = filterText.toLowerCase();

  //If the filter text is blank just use the whole data set
  if(!filterText || filterText == "")
  {
    $scope.gardenModel.shownGardens = $scope.gardenModel.gardens;
    return;
  }

  //step through each entry in the main list and add any gardens that match
  for (var i = 0; i < $scope.gardenModel.gardens.length; i++) {
    var curEntry = $scope.gardenModel.gardens[i];
    var curGarden = curEntry.curGarden;


    if(curGarden["Garden Name"] && curGarden["Garden Name"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
      tempToShow.push(curEntry);
    else if(curGarden["Address"] && curGarden["Address"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
      tempToShow.push(curEntry);
    else if(curGarden["Ownership"] && curGarden["Ownership"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
      tempToShow.push(curEntry);
    else if(curGarden.gardenId && curGarden.gardenId == filterText)
      tempToShow.push(curEntry);
  };
  $scope.gardenModel.shownGardens = tempToShow;
}

//Watch for any changes to the filter text (this is bound to the input in the HTML)
$scope.$watch('gardenModel.externalFilterText', function(value) {
  $scope.filterGardens(value);
});

//Watch for any changes on the service (this way if addition/edit are made and
//refresh happens in the service things stay up to date in this view, and the filter stays)
$scope.$watch( function () { return gardenService.gardens; }, function ( gardens ) {
  $scope.gardenModel.gardens = gardens;
  $scope.filterGardens($scope.gardenModel.externalFilterText);
});

编辑稍微清理了代码格式并添加了一些注释。