如何在角度中从ng-repeat中删除元素后更新范围？

Question

我想要实现的是，当我双击并且我的网格中的项目我遍历它时，根据它我的面包屑正在更新。但是当我在面包屑中点击回来时，面包屑之前的值被删除但是当我再次通过双击它进入内部时它也显示了之前删除的值。我附上我的代码和图像以便更好地理解。

 <div id="breadCrumb"><div ng-click="breadCrumbFilter('^/xyz/$')" style="float:left;">xyz</div>
<div ng-repeat="bCrumb in bCrumbs" id="{{bCrumb.name}}" style="float:left;
" ng-click="breadCrumbFilter(bCrumb)">{{ bCrumb.name }}</div></div> 
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.filterOptions = {
    filterText: '^/xyz/$'
  };

   $scope.breadCrumbFilter = function(bCrumb) {
        var filterText = bCrumb.path;
        if(filterText == null){
             filterText = bCrumb;
    }
       var active = $scope.filterOptions.filterText;
         if ($scope.filterOptions.filterText === filterText) {

          $scope.filterOptions.filterText = filterText;
        }
        else if ($scope.filterOptions.filterText !== '' ) {

          $scope.filterOptions.filterText = filterText;
        }

        $scope.resetBreadcrumbs(filterText,active);
      };
      $scope.resetBreadcrumbs = function(fText,rActive){

          var reset = fText;

          var activeBreadcrumbs = rActive;

          activeBreadcrumbs = activeBreadcrumbs.substring(reset.length -1,     activeBreadcrumbs.lastIndexOf("/"));

          var myEl =  angular.element(document.getElementById('/ '+activeBreadcrumbs));

          myEl.remove();


      };
    $scope.filterFpath = function(row) {

     var fileName  = row.entity.name;
      var folderPath = row.entity.Full_Path;
      var newPath = folderPath+fileName+'/';
        var filterText = '^'+newPath+'$';
    if ($scope.filterOptions.filterText ==='^'+folderPath+'$') {
  $scope.filterOptions.filterText = filterText;
     }
else if ($scope.filterOptions.filterText === filterText) {
      $scope.filterOptions.filterText = '';
}
    $scope.addname('/ '+fileName,filterText);
   };
   $scope.bCrumbs = [] ;
          $scope.addname=function(name,path)
            {

            obj={};
            obj['name'] = name;
            obj['path'] = path;
              $scope.bCrumbs.push(obj);

            };
    var rowTempl = '<div ng-dblClick="filterFpath(row)" ng-style="{ \'cursor\': row.cursor   }" ng-repeat="col in renderedColumns" '+'ng-class="col.colIndex()" class="ngCell{{col.cellClass}}"><div ng-cell></div></div>';
  $scope.myData = [{name: "Moroni", Full_Path: "/xyz/"},
               {name: "Tiancum", Full_Path: "/xyz/Moroni/"},
               {name: "Jacob", Full_Path: "/xyz/"},
               {name: "Nephi", Full_Path: "/xyz/Moroni/Tiancum/"},
               {name: "Nephiss", Full_Path: "/xyz/"}];

  $scope.gridOptions = {
    data: 'myData',
    filterOptions: $scope.filterOptions,
 rowTemplate: rowTempl,
  };
});

现在发生了什么： 在默认情况下显示的面包屑'xyz'中加载数据时的第一张图像

1. 双击moroni时，内部遍历并更新面包屑。



1. 当我点击xyz再次回来时：



1. 再次如果我在moroni里面穿过它的显示器就像这样：



问题是什么我无法弄明白。

Answer 1

通过查看你的代码我发现你正在删除dom元素，但你没有从数组中删除它，所以尝试找到所需删除文件的索引，然后在其中使用'slice'。

尝试这样的事情：

<div id="breadCrumb"><div ng-click="breadCrumbFilter('^/xyz/$')" style="float:left;">xyz</div>
<div ng-repeat="bCrumb in bCrumbs" id="{{bCrumb.name}}" style="float:left;
" ng-click="breadCrumbFilter(bCrumb,$index)">{{ bCrumb.name }}</div></div> 

   $scope.breadCrumbFilter = function(bCrumbs,$index) {
     $scope.bCrumbs.splice($index+1);
     var d = $scope.bCrumbs.length -1;
     path = bCrumbs[d].path;
    var filterText = path;
    if(filterText == null){
         filterText = bCrumb;
}
   var active = $scope.filterOptions.filterText;
     if ($scope.filterOptions.filterText === filterText) {

      $scope.filterOptions.filterText = filterText;
    }
    else if ($scope.filterOptions.filterText !== '' ) {

      $scope.filterOptions.filterText = filterText;
    }

  };

试一试。