Question

我正在寻找有关如何实现用于搜索的简单输入文本的教程或示例在网格中。我的尝试（但ng-keyup需要angularjs＆gt; 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);
                }

再见

NB 这是针对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);
});

修改清除代码格式并添加一些注释。

角度ui网格搜索

1 个答案: