Question

我正在尝试使用创建时间轴按钮创建时间轴。如果单击“创建”按钮，则会打开一个弹出窗口，并且需要选择任何项目，该项目将向时间轴添加一个事件。这是按钮和时间线＆＃39; div＆＃39;将添加新事件的位置：

<center><button type="button" class="btn btn-primary" ng-click="showRoutinePopUp()">Let's create routine</button></center>
<section id="cd-timeline" class="cd-container">
    <!--<routinepopup></routinepopup>-->
</section>

这是弹出窗口：

<div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
    <ul>
        <li ng-repeat="item in items">
            <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
        </li>
    </ul>
    Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>

以下是将popUp选定项目添加到时间轴的角度代码：

modalInstance.result.then(function (selectedItem) {

        el = $compile('<div class="cd-timeline-block" >' +
                        '<div class="cd-timeline-img cd-picture">' +
                            '<img src="img/cd-icon-picture.svg" alt="Picture">' +
                        '</div>' +
                        '<div class="cd-timeline-content">' +
                            '<h2>{{selected}}</h2>' +
                            '<p>{{selected}}</p>' +
                            '<a href="#0" class="cd-read-more">{{selected}}</a>' +
                            '<span class="cd-date">{{selected}}</span>' +
                        '</div>' +
                        '</div>')($scope);



        $scope.selected = selectedItem;
            angular.element(document.getElementById('cd-timeline')).append(el);

问题是每当通过Popup添加新事件时，它也会覆盖先前添加的事件。

通过这个Plnkr：http://plnkr.co/edit/C5LivW?p=preview

Answer 1

更好地使用ng-repeat显示任务和模态解析只将选定任务推送到selectedItems数组，现在在所有块中指向{{selected}}模态解析函数中的更改，这就是为什么所有任务都会重写。< / p>

Answer 2

您的新活动覆盖上一个活动的原因是：

您的selected变量每次都在同一个$scope上声明，因此列表中的每个项目都引用同一个对象，在您的情况下，它们都引用了最后添加的事件。< / p>

一些建议：您应该使用ng-repeat指令来显示列表中的项目。

ngRepeat指令从集合中为每个项目实例化一次模板。每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项，$ index设置为项索引或键。

我更新了您的plunker以向您展示一个示例，它不完整，但它显示了想要的行为。

以下是更新的HTML：

<section class="cd-container">
    <div class="cd-timeline-block" data-ng-repeat="event in events">
      <div class="cd-timeline-img cd-picture">
        <img src="img/cd-icon-picture.svg" alt="Picture">
      </div>
      <div class="cd-timeline-content">
        <h2>{{event}}</h2>
        <p>{{event}}</p>
        <a href="#0" class="cd-read-more">{{event}}</a>
        <span class="cd-date">{{event}}</span>
      </div>
    </div>
</section>

和更新的JS：

app.controller('appController', function($scope, $uibModal, $log, $compile) {
  $scope.events = [];

  var count = 0;

  console.log('inside controller');

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.showPopUp = function(size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'PopUp.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function() {

          return $scope.items;
        }
      }
    });


    modalInstance.result.then(function(selectedItem) {
      $scope.events.push(selectedItem);
      //angular.element(document.getElementById('cd-timeline')).append(el);
      count++;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

});

提交覆盖数据的模式popUp

2 个答案: