如何将拼接值再次添加到列表中而不刷新页面

我是角JS的新手，并且在将拼接值添加回列表时遇到问题。我如何这样做，或者我可以使用任何其他的Angular JS函数代替拼接来满足需求。以下是我所做的代码。如何将拼接值再次添加到列表中而不刷新页面

{

<!DOCTYPE html> 
<html> 
<head> 
    <title>Drag Drop + Remove Element</title> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css"> 
    <style> 
     [ng-drag] { 
      width: 100px; 
      height: 100px; 
      background: red; 
      color: white; 
      text-align: center; 
      padding-top: 40px; 
      display: block; 
     } 

     [ng-drop] { 
      background: silver; 
      text-align: center; 
      display: block; 
      position: relative; 
      padding: 20px; 
      width: 140px; 
      height: 140px; 
      float: left; 
     } 
     .draglist { 
      display: inline-block; 
      margin: 0 auto; 
     } 

     [ng-drag].dragging { 
      opacity: 0.5; 
     } 

     [ng-drag].drag-over { 
      border: solid 1px red; 
     } 

     [ng-drop].drag-enter { 
      border: solid 5px red; 
     } 

    </style> 
</head> 
<body ng-app="ExampleApp"> 


<div class="row text-center"> 
    <h1>Drag Drop + Remove Element</h1> 
</div> 

<div class="row text-center" ng-controller="MainCtrl"> 
<ul class="draglist"> 
<li ng-repeat="obj in draggableObjects | limitTo:quantity" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" > 
    <button type="button" class="close" ng-click="removeElement($index,draggableObjects.length)"><span aria-hidden="true" ng-mouseover>&times;</span></button> 
<div ng-drag="true" ng-drag-data="obj" ng-class="obj.name"> 
{{obj.name}} 
</div> 
</li> 
</ul> 
</div> 


<!--<script src="http://code.angularjs.org/1.3.15/angular.min.js"></script>--> 
<script src="Angular.js"></script> 
<script src="ngDraggable.js"></script> 
<script> 
    angular.module('ExampleApp', ['ngDraggable']). 
      controller('MainCtrl', function ($scope, $window) { 
       $scope.draggableObjects = [ 
        {name: 'one'}, 
        {name: 'two'}, 
        {name: 'three'}, 
        {name: 'four'}, 
        {name: 'five'}, 
        {name: 'six'}, 
        {name: 'seven'}, 
        {name: 'eight'}, 
        {name: 'nine'}, 
        {name: 'ten'} 
       ]; 

       $scope.quantity = 3; 
       $scope.showDelete = false; 

       $scope.removeElement = function(index, objLength){ 
        console.log("objLength::"+objLength);      
        $scope.showDelete = true; 
        if(objLength < 4){ 
         console.log("In if"); 
//      $window.location.reload(); 
//      $scope.draggableObjects; 
          console.log($scope.draggableObjects); 
          $scope.draggableObjects = $scope.draggableObjects.concat($scope.draggableObjects); 
//       angular.forEach($scope.draggableObjects, function(objects) { 
//        $scope.draggableObjects.push(objects); 
////        console.log($scope.draggableObjects); 
//       }); 
        } 
        else{ 
         $scope.draggableObjects.splice(index,1);       
        } 
       }; 

       $scope.onDropComplete = function (index, obj, evt) { 
        var otherObj = $scope.draggableObjects[index]; 
        var otherIndex = $scope.draggableObjects.indexOf(obj); 
        $scope.draggableObjects[index] = obj; 
        $scope.draggableObjects[otherIndex] = otherObj; 
       }; 
      }); 
</script> 
</body> 
</html>

}

现在我想要做的是，一旦得到价值从$ scope.draggableObjects拼接我想再次在代码的末尾添加拼接数据，以便一个循环继续所有的范围值。

任何帮助将受到欢迎。在此先感谢。

来源

2015-05-04 Kartik Arora

只是JavaScript的
$scope.draggableObjects.push(obj) // OBJ分组去除

来源

2015-05-04 10:15:59

虽然此源代码可以提供一个答案，解释了几句话将有利于当前和未来的读者。 – Thom

嗨Farhan，感谢您的回复，但正如您可以在我的代码中看到的，我已经尝试使用此代码（注释代码）。此代码只会推送未拼接的值，并且不会将已经拼接的值再次添加回列表。 –

在这里，我想再次将拼接的值添加回列表中而不刷新页面。 –

如何将拼接值再次添加到列表中而不刷新页面

回答

相关问题