Javascript angularj ui网格搜索

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

再见

注意：这是一个针对json文件的假请求，只是为了举个例子

---

更新：我使用ng-grid-1.3.2基本上解决了这个问题，我想你可以使用一个类似于我在下面所做的解决方案，我只是观察模型属性的变化，并启动一个函数在该点对数据集进行过滤

文本输入的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);
});

---

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

您是否使用ng网格？最好指定您使用的网格版本，例如行聚合随着时间的推移已经发生了相当大的变化。我将用ng网格显示我当前的实现。我已用版本更新了我的问题。提供的解决方案是否因某种原因无效？谢谢，只是一个问题myData是$scope.gardenModel.gardens？很抱歉再次打扰您，您可以用两个词：about$scope.$watch function{return gardenService.gardens；}，函数花园{//在这里处理它。例如：$scope.gardenModel.gardens=gardens；$scope.filterGardens$scope.gardenModel.externalFilterText；}；再次感谢您。是的，我创建了一个gardenModel对象，我将控制器的所有内容存储在其中，花园只是所有花园的一个数组，然后shownGardens就是我用于网格数据的对象。watch表达式是这样的，如果服务中存储的数据发生更改，则视图中的数据将更新。通过这种方式，我不需要知道是什么触发了更改，只是因为某些内容导致数据需要刷新。添加或编辑了一些内容。我制作了一个更简单的示例，看看我得到了$scope。$watch function{return$scope.myData；}，function value{if！$scope.searchText | |$scope.searchText=={$scope.myData=value；return；}/*这会给我一个错误，达到10$digest迭代次数。正在中止！*//$scope.filterData$scope.searchText；console.log$scope.searchText；}；我再次更新了plunker我添加了$scope.origData，它似乎可以工作：

//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);
});