Question

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

每个＆＃34;项目内容＆＃34; ng-repeat有一个＆＃34;删除＆＃34;用于从项目中删除/拼接项目/用户的按钮。

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

如果我应用过滤器（按姓氏的第一个字母过滤，只显示那些结果）......当我将索引拼接出数组时...... UI / DOM没有更新，用户仍然在列表（从我从控制台走过删除函数可以看出...数组已更新，索引/用户被删除）。

我使用的过滤器是一个自定义角度过滤器，它接受一个输入（要过滤的姓氏的起始字母）。

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框架的一部分）来启动/确认删除并继续进行拼接。

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

当控制器加载时......我有一个init函数，它从自定义角度工厂执行并填充ddUsers：

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

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

Answer 1

虽然未显示如何调用该函数，但我假设您从视图中传入ITest.Run。

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

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

我还假设$index就是那个对象所以你会这样做：

user

拼接后角度ng重复不更新

1 个答案: