提交覆盖数据的模态弹出窗口

Question

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

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

这是将弹出所选项目添加到时间线的角度代码：

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

您的新事件覆盖之前的事件的原因是：

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

一些建议：您应该使用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());
    });
  };

});

Answer 2

最好使用 ng-repeat 来显示任务，并且在模态解析中仅将选定任务推送到 selectedItems 数组，现在在所有块中，您指向 {{selected}} ，这会在模态解析函数中发生变化，这就是您所有任务都重写的原因。