不知何故 `$scope.selected` 没有填充正确的内容
如何使用 AngularJS 检索多个选择的选定值？
首先：我知道 Angular Multiselect Dropdown 模块，我不想使用它！用例需要一种不同类型的多选，这是 HTML<select multiple>允许的，我正在尝试实现一种在其中两个列表框周围移动项目的方法。
我已经开发了一些应该可以工作的代码，但不知何故$scope.selected没有填充正确的内容（或根本没有）。到目前为止，我认为应该是控制器设置的问题（我对 JavaScript 比较陌生），因为使用ng-model了一个更简单的示例。
索引.html
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="start.js"></script>
</head>
<body>
<div ng-controller="Configurator">
<select multiple ng-model="selected"
ng-options="x.name for x in fields">
</select>
</div>
{{selected}}
<button ng-controller="Configurator" ng-click="move() ">Move</button>
<div ng-controller="Configurator">
<select multiple ng-model="selected2"
ng-options="x.name for x in chosen">
</select>
</div>
</body>
</html>
开始.js
angular.module('demo', [])
.controller('Configurator', function($scope, $http) {
$http.get('http://localhost:8080/fields').
then(function(response) {
$scope.fields = response.data;
console.log(response.data);
});
$scope.selected;
$scope.chosen;
$scope.selected2;
$scope.move = function() {
console.log('function working');
$scope.chosen = $scope.selected.slice();
$scope.fields = $scope.fields.filter(x => !$scope.selected.includes(x));
}
});
为什么上面的代码不像我预期的那样工作？ng-model应该动态保存在元素中的多选元素中选择的 JSONObjects $scope.selected，但每次我通过控制台输出检查时它都是空的，因此第二个多选不会在按钮单击时填充。我究竟做错了什么？是否存在范围问题，因为我通过 http 请求检索元素？我是否必须初始化$scope.selected为数组或将其移动到不同的范围？老实说，我对谷歌没有想法和东西，所以我很感激任何帮助。
芜湖不芜1回答
-
临摹微笑
仅使用一个控制器：<body ng-controller="Configurator"> <div ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶C̶o̶n̶f̶i̶g̶u̶r̶a̶t̶o̶r̶"̶ > <select multiple ng-model="selected" ng-options="x.name for x in fields"> </select> </div> {{selected}} <button ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶C̶o̶n̶f̶i̶g̶u̶r̶a̶t̶o̶r̶"̶ ng-click="move() ">Move</button> <div ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶C̶o̶n̶f̶i̶g̶u̶r̶a̶t̶o̶r̶"̶ > <select multiple ng-model="selected2" ng-options="x.name for x in chosen"> </select> </div></body>每个ng-controller指令都会创建一个子作用域，并且因为ng-model它绑定了一个作用域属性，所以它将对父作用域隐藏。
随时随地看视频慕课网APP
相关分类
JavaScript