为了账号安全,请及时绑定邮箱和手机立即绑定

不知何故 `$scope.selected` 没有填充正确的内容

不知何故 `$scope.selected` 没有填充正确的内容

芜湖不芜 2021-12-23 15:14:30
如何使用 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它绑定了一个作用域属性,所以它将对父作用域隐藏。


查看完整回答
反对 回复 2021-12-23
  • 1 回答
  • 0 关注
  • 116 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信