Angular Directive - ngRepeat添加從陣列中刪除

我需要迭代一個對象屬性，它是一個對象數組，以便呈現輸入字段。我需要能夠動態添加/刪除數組中的對象並顯示相應的元素。我可以添加/刪除數組中的對象，但視圖不會更新。我試過使用$超時但它沒有更新視圖。如何根據哪些對象被添加到數組中或從數組中移除來呈現正確的元素。Angular Directive - ngRepeat添加從陣列中刪除

主模板

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

電信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>

來源

2017-03-31 neridaj

嘗試$ evalAsync而不是$ timeout。 –

這是因爲指令不會運行編譯塊，使用$ watch來做到這一點。 –

或者做一個location.reload（），這樣它刷新重新加載的列表。 – DDelgro

的問題是，我沒有遍歷正確的屬性。我的ng-repeat缺少'times'屬性，即ng-repeat =「載波時間[載波]時間

來源

2017-03-31 21:13:36 neridaj

Angular Directive - ngRepeat添加從陣列中刪除

回答

相關問題