提交模式popUp覆蓋數據

我正在嘗試使用創建時間線按鈕創建時間線。如果點擊創建按鈕，彈出窗口打開並且需要選擇任何項目，並且該項目將向時間線添加一個事件。這裏是按鈕和時間線「格」，其中新事件將被添加：提交模式popUp覆蓋數據

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

這裏是apepeding選擇彈出的角碼項目時間表：

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

的問題是每當通過彈出添加一個新的事件，它覆蓋以前添加的事件也。

通過這個Plnkr：http://plnkr.co/edit/C5LivW?p=preview

來源

2016-05-31 Vivek

新的事件被覆蓋以前的事件的原因是：

你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()); 
    }); 
    }; 

});

來源

2016-05-31 07:36:01

更好地利用NG-重複顯示的任務和模式的決心只會把選定的任務selectedItems數組，現在所有的塊，你指向{{選擇}}這改變模態解析函數，這就是爲什麼你所有的任務重寫。

來源

2016-05-31 07:30:53

提交模式popUp覆蓋數據

回答

相關問題