我正在使用Angular获取引导双列表框的数据。数据完全显示在列表中，但是当我单击列表中的任何行时，它只会将所有数据扔到另一个列表中。
如何解决此问题，请帮忙！
`<!-- Bootstrap -->
<link href="{{ URL::asset('web/css/bootstrap-duallistbox.css') }}"
rel="stylesheet">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" class="content" ng-app="myApp" ng-
controller="testController">
<!-- Content Header (Page header) -->
<input type="hidden" name="base_url" id="base_url" value="<?php echo
env('APP_URL');?>">
<section class="content-header">
<h1>
<strong>Edit Mocks</strong>
</h1>
<div class="breadcrumb" style="display:block">
<button type="button" ng-click="sendQuestionList();" class="btn bg-
color" > Update Mock Test</button>
</div>
<div class="row ">
<div class="col-sm-7">
<label for="desc" style="margin-top:2rem;"
class="control-label">Title</label>
<input type="text" name="desc" class="form-control"
id="title" placeholder="Enter Description" value="{{$mockData->title}}">
<div class="error-message">{{ $errors->first('desc') }}
</div>
</div>
</div>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-sm-4 col-lg-3">
<label>Select Category</label>
<select name="category_id" id="category_id" ng-model="category_id"
ng-change="getSubcategories()" class="form-control" style="width:90%">
<option value="">Select Category</option>
<option ng-repeat="option in categories" value="@{{option.id}}"
>@{{option.name}}</option>
</select>
</div>
<div class="col-sm-4 col-lg-3">
<label>Select SubCategory</label>
<select name="subcategory_id" id="subcategory_id" ng-
model="subcategory_id" ng-change="getTestList();" class="form-
control" style="width:90%">
<option value="">Select SubCategory</option>
<option ng-repeat="option in subcategories"
value="@{{option.id}}">@{{option.name}}</option>
</select>
</div>
<div class="col-sm-4 col-lg-3" style="padding-top:1.5%" ng-
hide="!selectedCount">
<label>Selected Count :</label> <a href="#" data-toggle="modal" data-
target="#selectedQuestions">@{{selectedCount}}</a>
</div>
</div>
<div class="row">
<!-- left column -->
<div class="col-md-12">
<br>
<div class="panel">
<form>
<div class="form-group">
<select multiple ng-model="data.value"
id="exampleInputEmail" name="duallistbox_demo1[]">
<option ng-repeat="d in data">@{{d.question_title}}
</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--/.col (left) -->
</div>
</div> <!-- /.row -->
<!-- Modal -->
<div id="selectedQuestions" class="modal fade" role="dialog" >
<div class="modal-dialog" style=" 'position': 'fixed', 'top': '50%',
'margin-top': '-100px', 'left': '50%', 'margin-left': '-235px' ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>Questions</b></h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>Question Title</th>
<th>Count</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in chckedIndexsData">
<td>@{{data.id}}</td>
<td>@{{data.question_title}}</td>
<td>@{{data.count}}</td>
<td>@{{data.created_at_formatted}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="addTest" class="modal fade" role="dialog" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>Add Mock Test</b></h4>
</div>
<div class="modal-body">
<div class="forn-group">
<label>Enter Title</label>
<input type="text" class="form-control" id="title" name="title">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn bg-color" data-dismiss="modal" ng-
click="()">Submit</button>
</div>
</div>
</div>
</div>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as
needed -->
<script src="{{ URL::asset('web/js/jquery.bootstrap-duallistbox.js') }}">
</script>
<script>
**var demo1 =
$('select[name="duallistbox_demo1[]"]').bootstrapDualListbox();**
</script>
<script>
var app = angular.module('myApp', [])
app.controller('testController', function ($scope, $http, $location,
$window) {
var keys = [];
var values = [];
var APP_URL = document.getElementById('base_url').value;
var
id=window.location.href.substr(window.location.href.lastIndexOf('/') +
1);
var request = $http({
method: "GET",
url: APP_URL+'/edit-mocktest/'+id,
data: '',
headers: { 'Accept':'application/json' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
$scope.data = data;
console.log(JSON.stringify($scope.data));
for(var i=0;i<=data.length;i++){
$scope.formatted_keys_value = data[i].formatted_keys;
$scope.id = data[i].id;
$scope.data1 = data[i];
if($scope.formatted_keys_value == 1){
keys.push($scope.id);
values.push($scope.data1);
}
$scope.chckedIndexs= keys;
$scope.chckedIndexsData = values;
$scope.selectedCount = $scope.chckedIndexsData.length;
}
$('#loading').css('display', 'none');
document.getElementById("res").value = JSON.stringify(data);
})
.error(function (data, status, headers, config) {
document.getElementById("res").value = JSON.stringify(data);
});
/*==========FUNCTION FOR GET CATEGORIES------------------------*/
var request = $http({
method: "GET",
url: APP_URL+'/api/categories',
data: '',
headers: { 'Accept':'application/json' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
$scope.categories = data;
$('#loading').css('display', 'none');
document.getElementById("res").value = JSON.stringify(data);
})
.error(function (data, status, headers, config) {
document.getElementById("res").value = JSON.stringify(data);
});
/*==========FUNCTION FOR GET SUBCATEGORIES------------------------*/
$scope.getSubcategories = function(){
$scope.category_id = $('#category_id').val();
var request = $http({
method: "GET",
url: APP_URL+'/api/subcategories?id='+$scope.category_id,
data: '',
headers: { 'Accept':'application/json' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
$scope.subcategories = data;
$('#loading').css('display', 'none');
document.getElementById("res").value = JSON.stringify(data);
})
.error(function (data, status, headers, config) {
document.getElementById("res").value = JSON.stringify(data);
});
}
/*==========FUNCTION FOR GET FILTERED LIST------------------------*/
$scope.getTestList = function(){
$scope.subcategory_id = $('#subcategory_id').val();
var request = $http({
method: "GET",
url: APP_URL+'/api/mock_test_filter?
subcategory_id='+$scope.subcategory_id,
data: '',
headers: { 'Accept':'application/json' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
$scope.data = data;
console.log(JSON.stringify(data));
$('#loading').css('display', 'none');
document.getElementById("res").value = JSON.stringify(data);
})
.error(function (data, status, headers, config) {
document.getElementById("res").value = JSON.stringify(data);
});
}
/*==========FUNCTION FOR GET SELECTED QUESTIONS------------------------*/
$scope.checkedIndex = function (id,values) {
console.log(JSON.stringify($scope.chckedIndexs));
console.log(JSON.stringify($scope.chckedIndexsData));
if ($scope.chckedIndexs.indexOf(id) === -1) {
$scope.chckedIndexs.push(id);
$scope.chckedIndexsData.push(values);
$scope.selectedCount = $scope.chckedIndexsData.length;
}
else {
$scope.chckedIndexs.splice($scope.chckedIndexs.indexOf(id), 1);
$scope.chckedIndexsData.splice(
$scope.chckedIndexsData.indexOf(values),
1);
$scope.selectedCount = $scope.chckedIndexsData.length;
}
}
$scope.sendQuestionList = function(){
$scope.questionsArray = $scope.chckedIndexs;
$scope.title = $('#title').val();
var id=window.location.href.substr(window.location.href.lastIndexOf('/') +
1);
$scope.questionsArrayList = {questionID : $scope.questionsArray, "title" :
$scope.title};
console.log(JSON.stringify($scope.questionsArrayList));
var request = $http({
method: "PUT",
url: APP_URL+'/api/test/update/'+id,
data: $scope.questionsArrayList,
headers: { 'Accept':'application/json' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
$scope.getData = data;
//location.reload();
console.log(JSON.stringify(data));
$window.location.href = APP_URL+'/mocktest/all';
$('#loading').css('display', 'none');
document.getElementById("res").value = JSON.stringify(data);
})
.error(function (data, status, headers, config) {
console.log(JSON.stringify(data));
});
}
});
</script>
<!--------------------------------------------- dual list box -----------
------------------------------------------------------->
@stop
在上面的代码中，我用于双重列表的代码是：
<div class="form-group">
<select multiple ng-model="data.value" id="exampleInputEmail" name="duallistbox_demo1[]">
<option ng-repeat="d in data">@{{d.question_title}}</option>
</select>
</div>
为此，我正在使用以下脚本
var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox();