Angular 拼接后 ng-repeat 不更新

Question

我正在 Angular Material 网站上工作并使用 ng-repeat 填充 table。 ng-repeat 生成的列表包含用户列表（用户数组由 RESTFul 查询填充）。

ng-repeat 的每个 "item-content" 都有一个 "Delete" 按钮来 delete/splice 数组中的 item/user。

如果我没有对 ng-repeat 语句应用过滤器...当我将所选用户的索引从数组中拼接出来时...UI/DOM 会更新并删除该用户从列表中。

如果我应用过滤器（按姓氏的第一个字母过滤并仅显示那些结果）...当我将索引从数组中拼接出来时...UI/DOM 未更新并且用户保留在列表中（从我从控制台执行删除功能可以看出...数组已更新并且 index/user 已删除）。

我使用的过滤器是一个自定义 angular 过滤器，它接受一个输入（您要过滤的姓氏的首字母）。

app.filter('startsWith', function () {
return function (items, letterMatch) {
    var re = new RegExp("^[" + letterMatch.toUpperCase() + letterMatch.toLowerCase() + "]$");
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      var lastNameLetter = item.user.name.substr(item.user.name.indexOf(' ') + 1, 1);

      if (re.test(lastNameLetter)) {
        filtered.push(item);
      }
    }
    return filtered;
};
});

这是 ng-repeat 语句：

 <md-item ng-repeat="user in ddUsers | startsWith:selectedFilter | startFrom:currentPage*pageSize | limitTo:pageSize">

在控制器中...我正在使用 Dialog Prompt（Angular Material 1.1 RC 框架的一部分）来 initiate/confirm 删除并继续拼接。

$scope.showPrompt = function(ev,index,user) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.prompt()
      .title('Delete User?')
      .textContent('Type in DELETE to confirm deletion of the user.')
      .placeholder('DELETE')
      .ariaLabel('Delete User')
      .targetEvent(ev)
      .ok('Delete')
      .cancel('Cancel');

$mdDialog.show(confirm).then(function(result) {
  if(result=="DELETE")
  {
    $scope.ddUsers.splice(index, 1);
    $scope.showSimpleToast('Successfully deleted ' + user.user.name);
  }
  else
  {
    $scope.showSimpleToast('Did not confirm properly');
  }      
}, function() {
  $scope.showSimpleToast('Cancelled deletion for ' + user.user.name);
  //var message = $scope.filterLastName(user.user.name);
  //$scope.showSimpleToast(message);
});};

当控制器加载时...我有一个初始化函数，它从自定义 angular 工厂执行和填充 ddUsers：

var init = function () {
$scope.ddUsers = $UserList.UserList;
}
init();

我不确定为什么在应用过滤器时 ng-repeat 在拼接后不更新。如果我在 ng-repeat 上没有过滤器，ng-repeat 会更新 UI/DOM 以反映更改，并且您再也看不到用户了。

Answer 1

虽然没有显示您如何调用该函数，但我假设您是从视图中传入 $index。

这样做的问题是 $index 过滤数组的索引与原始数组的索引不同，因此您会从主数据数组中拼接出错误的元素

您需要通过传入实际对象来进行自己的索引。

我还假设 user 是那个对象，所以你会这样做：

 if(result=="DELETE")
  {
    var idx = $scope.ddUsers.indexOf(user);
    if(idx > -1 ){// make sure can index this object
       $scope.ddUsers.splice(idx, 1);
       $scope.showSimpleToast('Successfully deleted ' + user.user.name);
    else{
      // Ooops ... can't find it 
    }
  }

Angular 拼接后 ng-repeat 不更新

Angular ng-repeat not updating after splice

angularjs

ng-repeat

angular-material