通过orderBy和/或筛选器修改ng repeat时重置状态

Reset state when modify ng-repeat by orderBy and/or filter

本文关键字：repeat ng 状态 修改 orderBy 筛选 通过      更新时间：2023-09-26

我对Angular JS很陌生，但我一般都能理解JS。Angular有一种完全不同的方法，所以我不知道如何做到这一点：

得到了一个对象数组，这样我就可以根据属性进行排序，并根据附加到输入"query"的模型提供的字符串进行筛选。

一切都很好，直到我需要保留按属性"group"分组的对象，这时数组由输入中键入的关键字进行筛选。

<input ng-model='query' type='text'>    
<div ng-repeat='reservation in reservations | filter: query | orderBy: "group"'>
  <span as-reset-list='{{$last}}'></span>
  <h2 ng-show='CreateHeader(reservation.group)'>Group</h2>
  <div>Group:  {{ reservation.group }} - ID: {{ reservation.id }}</div>
</div>

为了打印一个指示组的标题，我使用了$scope中定义的变量"currentGroup"，这样我就可以在循环中与当前对象进行比较。

function RestaurantCtrl($scope) {
  $scope.restaurants = [/* data */];
  $scope.currentGroup = '';
  $scope.CreateHeader = function(group){
    showHeader = (group!=$scope.currentGroup);
    $scope.currentGroup = group;
    return showHeader;
  }
}

但是，当进行了一次没有结果的搜索并重复另一次搜索时，变量会丢失值或其他内容，因此分组无法按预期工作。

我怎样才能做到这一点？我尝试创建一个指令，这样我就可以重置变量"currentGroup"的值，但它并不总是有效的。

我的代码的一个工作示例在这里http://jsfiddle.net/5HZYt/

问题可能与ng模型设置有关。看起来您正在将ng模型设置为一个简单的范围变量，当它发生更改时，ng模型将丢失绑定。为了避免这种情况，请尝试将ng模型设置为对象的特性，以便在值更改时，angular保留对对象的引用。

像这样的东西：

$scope.modelObj = {prop:"This Value"};

然后。。

<input ng-model='modelObj.prop' type='text'>
相关文章：