拼接后角度ng重复不更新

时间:2016-03-26 15:03:45

标签: angularjs ng-repeat angular-material

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

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

如果我没有将过滤器应用于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以反映更改,并且您再也看不到该用户了。

1 个答案:

答案 0 :(得分:0)

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

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

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

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

user