Я разрабатываю приложение, использующее Angular, и мы хотим синхронизировать два selectbox (HTML). Это означает, что когда я нажимаю значение в первом selectbox, я хочу, чтобы значение во втором selectbox обновлялось, и также можно было бы щелкнуть.Выбор в selectbox в IE при изменении параметров с угловым
я сделал следующее 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>
В этом plunker все выглядит отлично. Но если вы копируете/вставляете тот же самый код в test.html, например, открывая его в IE (V11), вы увидите проблему: Начните с нажатия на первый selectbox, чтобы выбрать вариант. Попытайтесь выбрать опцию во втором selectbox, вы увидите, что выбор становится невозможным.
Он хорошо работает в FF или Chrome, а также работает лучше на Plunker, даже если иногда он перестает работать в Plunker (я не нашел точного варианта использования).
У этого есть реальная связь с тем, что я освобождаю массив, который используется для заполнения второго selectbox. Если я прокомментирую эту строку, все будет работать нормально: $ scope.list2.length = 0;
Я пробовал разные способы, чтобы очистить этот массив: How do I empty an array in JavaScript?
Кто-нибудь есть идея о том, что здесь происходит и как это исправить?
Благодаря