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

Question

我正在尝试使用创建时间线按钮创建时间线。如果单击创建按钮，将打开一个弹出窗口，需要 select 任何项目，该项目将向时间轴添加一个事件。这是将添加新事件的按钮和时间轴 '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>

这里是 angular 代码，该代码将弹出 selected 项目复制到时间轴：

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}}，模态解析函数的变化就是你所有任务重写的原因.

Answer 2

您的新活动覆盖先前活动的原因是：

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

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

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

我已经更新了您的 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());
    });
  };

});

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

Submitting the modal popUp overriding the data

html

popup

angularjs

angular-ui-bootstrap