我在angularjs中创建了一个应用程序,希望在其中将listbox1的值添加到listbox2。
当我点击任何li选项卡时,我得到了该li的值,但是当我试图将该值推入其他列表框时,它不会显示出来。
请帮帮我。。
先端的Thanx
链接:-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>
最佳答案
它不起作用,因为您没有复制列表中的对象。list2.title
没有意义,因为list2
是一个数组。这样更合理:
$scope.toggle = function(item){
$scope.list2.push(item);
}
并将调用
toggle
的方式更改为:ng-click="toggle(item)"
另一方面,我必须指出,
toggle
只是添加到list2
中,而不是从list1
中删除,这可能不是您想要的行为。