Question

我是角度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拼接了值，我想在代码的末尾再次添加拼接数据，以便继续循环范围内的所有值。

欢迎任何帮助。提前谢谢。

Answer 1

只是javascript
$scope.draggableObjects.push(obj) // obj prev删除

如何在不刷新页面的情况下再次将拼接值添加到列表中

1 个答案: