Angular Richtlinie - ngRepeat von Array Entfernen Hinzufügen

Question

Ich brauche eine Objekteigenschaft iterieren, die ein Array von Objekten ist, um Eingabefelder zu machen. Ich muss Objekte dynamisch aus dem Array hinzufügen/entfernen und die entsprechenden Elemente anzeigen können. Ich kann Objekte aus dem Array hinzufügen/entfernen, aber die Ansicht wird nicht aktualisiert. Ich habe versucht, $ Timeout zu verwenden, aber es aktualisiert die Ansicht nicht. Wie kann ich die richtigen Elemente basierend darauf, welche Objekte aus dem Array hinzugefügt/entfernt wurden, rendern?

Hauptvorlage

<tbody carrier></tbody> 

carrier.directive.js

angular.module('carrierModule') 
.directive('carrier', carrier); 
carrier.$inject = [ 
    '$translate', 
    '$httpParamSerializer', 
    '$timeout' 
]; 
function carrier($translate, $httpParamSerializer, $timeout) { 
    return { 
    restrict: 'A', 
    scope: { 

    }, 
    templateUrl: 'app/carrier/carrier.tpl.html', 
    link: function(scope, element, attr) { 
     scope.timeRangeOptions = [ 
     {name: "All days of the week", value: 1}, 
     {name: "Discounted time per day", value: 2}, 
     {name: "Any time", value: 3} 
     ]; 
     scope.carriers = { 
     "Verizon": {times: [{start: "10:00", end: "12:00"}], selectedDiscountedTimeRange: scope.timeRangeOptions[0]}, 
     "T-Mobile": {times: [{start: "10:00", end: "12:00"}], selectedDiscountedTimeRange: scope.timeRangeOptions[0]}, 
     "Spring": {times: [{start: "10:00", end: "12:00"}], selectedDiscountedTimeRange: scope.timeRangeOptions[0]}, 
     "Orange": {times: [{start: "10:00", end: "12:00"}], selectedDiscountedTimeRange: scope.timeRangeOptions[0]} 
     }; 
     scope.carrierOrder = ["Orange", "Spring", "T-Mobile", "Verizon"]; 
     scope.selectedDiscountedTimeRange = scope.timeRangeOptions[0]; 
     scope.addTimeFields = function(carrier) { 
     $timeout(function() { 
      scope.carriers[carrier].times.push({start: "10:00", end: "12:00"}); 
     }); 
     }; 

    } 
    // link 
    } 
} 

carrier.tpl.html

<tr ng-repeat="(carrier, value) in carriers track by $index"> 
    <td> 
    <div class="form-inline"> 
     <carrier-time carriers="carriers" carrier-name="carrier" ng-repeat="time in carriers[carrier] track by $index"></carrier-time> 
     <i class="fa fa-clock-o add-time-btn" aria-hidden="true" ng-click="addTimeFields(carrier)"></i> 
    </div> 
    </td> 
</tr> 

Träger time.directive.js

angular.module('carrierModule') 
.directive('carrierTime', carrierTime); 
carrierTime.$inject = [ 
    '$translate', 
    '$httpParamSerializer', 
    '$timeout' 
]; 
function carrierTime($translate, $httpParamSerializer, $timeout) { 
    return { 
    restrict: 'E', 
    scope: { 
     carriers: '=', 
     carrierName: '=' 
    }, 
    templateUrl: 'app/carrier/carrier-time.tpl.html', 
    link: function(scope, element, attr) { 
     scope.removeTimeFields = function(carrier) { 
     $timeout(function() { 
      scope.carriers[carrier].times.pop(); 
     }); 

     }; 
    } 
    // link 
    } 
} 

***carrier-time.tpl.html*** 

    <div class="form-group" ng-mouseenter="showRemoveTimeFields = !showRemoveTimeFields"> 
    <input class="form-control start" type="time"><span>&nbsp;-&nbsp;</span><input class="form-control end" type="time"> 
    </div> 
    <i ng-if="showRemoveTimeFields" class="fa fa-times-circle remove-time" aria-hidden="true" ng-click="removeTimeFields(carrierName)"></i> 

Answer 1

Das Problem war, dass ich über die richtige Eigenschaft nicht Looping. Meine ng-repeat fehlte die 'Zeit' Eigenschaft dh ng-repeat = "Zeit in Träger [Träger] .times