Question

我需要迭代一个对象属性，它是一个对象数组，以便呈现输入字段。我需要能够从数组中动态添加/删除对象并显示相应的元素。我能够从数组中添加/删除对象，但视图不会更新。我尝试过使用$ timeout，但它没有更新视图。如何根据从数组中添加/删除的对象来渲染正确的元素。

主模板

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

Answer 1

问题是我没有在正确的属性上循环。我的ng-repeat错过了＆＃39; times＆＃39;属性，即ng-repeat =＆＃34;载体中的时间[carrier] .times

Angular Directive - ngRepeat添加从数组中删除

1 个答案: