ng-repeat after renewal does not update DOM



  • <header id="tabHeader">
        <div class="h-head" ng-click="switchTab($index)" ng-repeat="key in data">{{key.grad}}</div>
        <div class="addHead" ng-click="addTab()">+</div>
    </header>
    

    There are deposits, on the pressure to addHead, add a new one.

    $scope.addTab = function () {
    
    $scope.data.push({grad : 'new grad'});
    removeActive();
    console.log(headers.length);
    makeActive(headers.length-1);
    

    };

    I add to the data set another object and ng-repeat draws a new deposit, but the function makeActive does not see a new element.
    That's how the collection of deposits is:

    var headers = document.getElementById('tabHeader').children;

    Function:

    function makeActive(i) {
    console.log(headers);
    headers[i].classList.add('active');
    $scope.activeData = $scope.data[i];
    }



  • When you use the angular, forget about manipulating DOM directly, it's only necessary in extreme cases.

    For headers[i].classList.add('active'); Yes. ng-class

    It will be sufficient to recall the active input index ($scope.activeTab = index) As a result, classes can be very easily assigned:

    <header id="tabHeader">
        <div class="h-head" ng-class="{active: $index == activeTab}" ng-click="switchTab($index)" ng-repeat="key in data">{{key.grad}}</div>
        <div class="addHead" ng-click="addTab()">+</div>
    </header>`
    

    In this case, a class will be applied to the chosen taboo. active

    PS: Do not forget to default the first active contribution




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2