javascript - 如何在angularjs中将数据从列表框添加到列表框

Question

我正在用 angularjs 创建一个应用程序，我想在其中将值从 listbox1 添加到 listbox2。

当我点击任何 li 选项卡时，我得到了该 li 的值，但是当我试图将该值插入其他列表框时，它没有显示。

请帮帮我..

感谢进阶

链接:- http://plnkr.co/edit/jZeeyFmjIlcsasyL9CzC?p=preview

var App = angular.module('myApp', ['ngDragDrop']);
App.controller('OverviewCtrl', function ($scope) {
    $scope.list2 = [
        {'title': 'Item 1'},
        {'title': 'Item 2'},
        {'title': 'Item 7'},
        {'title': 'Item 8'}
    ];
    $scope.list1 = [
        {'title': 'Item 1'},
        {'title': 'Item 2'},
        {'title': 'Item 3'},
        {'title': 'Item 4'},
        {'title': 'Item 5'},
        {'title': 'Item 6'},
        {'title': 'Item 7'},
        {'title': 'Item 8'}
    ];
    $scope.toggle = function(test,$scope){
       // alert(test)
        $scope.list2.push($scope.list2.title.test);
    }
});

HTML 代码:-

 <div class="row" ng-controller="OverviewCtrl">
    <div class="col-md-5" > 
        <div class="panel panel-default">
            <div class="panel-heading"><h4>List 1</h4></div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item" ng-repeat="item in list1" ng-click="toggle(item.title)" >{{item.title}}</li>
                </ul>
            </div>
        </div>

    </div>
    <div class="col-md-2" style="text-align: center"> 
        <button type="button" class="btn btn-success"  style="margin-top: 70px; margin-bottom: 10px">
            <span class="glyphicon glyphicon-triangle-right btn-sm" aria-hidden="true"></span>
        </button>
        </br>
        <button type="button" class="btn btn-success"  style="margin-top: 10px; margin-bottom: 10px">
            <span class="glyphicon glyphicon-triangle-left btn-sm" aria-hidden="true"></span>
        </button>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading"><h4>List 2</h4></div>
            <div class="panel-body">
                <ul class="list-group">
                   <li class="list-group-item" ng-repeat="item in list2" >{{item.title}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

它不起作用，因为您没有复制列表中的对象。list2.title 没有意义，因为 list2 是一个数组。这样会更合理:

$scope.toggle = function(item){
    $scope.list2.push(item);
}

并将调用 toggle 的方式更改为:

ng-click="toggle(item)"

附带说明，我必须指出 toggle 只是添加到 list2 但不会从 list1 中删除，这可能不是您的目标行为。