Question

我开发了一个使用Angular的应用程序，我们希望同步两个selectbox（HTML）。这意味着当我点击第一个选择框中的值时，我希望第二个选择框中的值更新，并且也可以点击。

我做了以下的plunker来解释我们的问题： http://plnkr.co/edit/KkBVcu29CZ6Elr741ZPe?p=preview

<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" type="text/javascript"></script>
<script>
'use strict';
angular.module("myApp", []).run(function($rootScope) {}).config(function () {});

angular.module('myApp').controller('myCtrl',  function(
        $scope) {
    //$scope.obj2Selected = null;
    $scope.list1 = [];
    $scope.list1.push({
                id : "1",
                name : "1", 
                selected : false
            });
    $scope.list1.push({
                id : "2",
                name : "2", 
                selected : false
            });
    $scope.list1.push({
                id : "3",
                name : "3", 
                selected : false
            });

    $scope.list2 = [];
    $scope.list2 .push({
                id : "1",
                name : "1" 
            });
    $scope.list2.push({
                id : "2",
                name : "2"
            });
    $scope.list2.push({
                id : "3",
                name : "3" 
            });   

    $scope.selectionObjDone = function(){
        $scope.obj2Selected = null; 
        $scope.list2.length = 0;
      $scope.list2.push({
            id : Math.random().toString(),
            name : Math.random().toString()
        });
      $scope.list2.push({
            id : Math.random().toString(),
            name : Math.random().toString()
        });
    };
});
</script>
<div ng-controller="myCtrl">

<select size="10" id="listNodes" style="width:200px;"
    ng-options="obj as obj.name for obj in list1 track by obj.id" ng-model="objSelected"
    ng-change="selectionObjDone()">
</select>
<select size="10" style="width:200px;" id="select2"
    ng-options="obj as obj.name for obj in list2 track by obj.id"
    ng-model="obj2Selected" >
</select>

</div>
</html>

在这个吸管中，一切看起来都很好。但是，如果您在test.html中复制/粘贴完全相同的代码，例如在IE（V11）中打开它，您将看到问题所在：首先，单击第一个选择框以选择一个或另一个选项。尝试在第二个选择框中选择一个选项，您将看到选择不再可能。

它在FF或Chrome中效果很好，而且它在Plunker上运行得更好，即使有时它停止在Plunker中工作（我没有找到确切的用例）。

它有一个真实的链接，我清空用于填充第二个选择框的数组。如果我评论这一行，一切正常： $ scope.list2.length = 0;

我尝试了不同的方法来清空这个数组： How do I empty an array in JavaScript?

有没有人知道这里发生了什么以及如何解决这个问题？

由于

Answer 1

最后，即使是Angular的专家我们也没有找到答案，但等待一些，新版本的Angular（1.5.7）通过魔术解决了这个问题！

使用角度

1 个答案: