how to update a scope after removing element from ng-repeat in angular?

Question

what i am trying to achieve is that when i am double clicking and item in my grid i traverse inside it, according to it my breadcrumbs is updating. but when i am clicking back in breadcrumbs then breadcrumbs previous value is removed but when i am moving inside again by double click it show previous removed value also. i am attaching my code and also a image to better understand.

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

what happening right now: 1st image when data loaded in breadcrumbs 'xyz' displayed by default

enter image description here

when double click on moroni it is traversed inside and breadcrumbs updated.

enter image description here

when i click on xyz come back again:

enter image description here

Again if i traverse inside moroni its displays something like this:

enter image description here

What is the issue i am not able to figure it out.

http://plnkr.co/edit/wmXclk8fvnQ7hyD4lGQn?p=preview plunker link — , Dec 09 '14 at 11:53
well, after looking at plnkr I have no idea how it should work and what is wrong. — Rasalom, Dec 09 '14 at 12:05
@Rasalom can you please let me know is after removing some element from ng-repeat how to update the scope — , Dec 09 '14 at 12:07
its is happening because scope is not updated i think. as i am new to angular so i am not able to figure out — , Dec 09 '14 at 12:08
oh, I got it. in Angular $scope is the in thing, and html will be updated according to it, but you trying to change html and want to scope be updated accoring it. But that's not how it works, and you can't do it this way. You need to change your code to work with scope variables. This question may be helpful: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Rasalom, Dec 09 '14 at 13:04

score 0 · Accepted Answer · answered Dec 10 '14 at 08:22

By seeing your code i found out that you are removing dom element but you are not deleting it from array so try finding index of the desired remove file and then use 'slice' in that.

Try something like this:

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

  };

try this out.

how to update a scope after removing element from ng-repeat in angular?

1 Answers1