如何使用 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>开始.jsangular.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 回答
临摹微笑
TA贡献1982条经验 获得超2个赞
仅使用一个控制器:
<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它绑定了一个作用域属性,所以它将对父作用域隐藏。
添加回答
举报
0/150
提交
取消