angular 1.3 中的 ng-option 在异步设置集合时忘记了 ngmodel
ng-option in angular 1.3 forgets ng-model when the collection is set asyncronously
我在使用 ng-model 的 ng-option 指令时遇到问题(升级到 1.3 版本后)。当我在异步设置集合之前设置的模型绑定到 ng-option 并且模型是十进制值时(适用于整数)。 FF 没问题,我至少在 IOS safari 和 chrome 中看到问题。
尽你所能see here:
.controller('MainCtrl', function($scope , $timeout) {
$scope.selected = {item: 2.5}; //setting an integer options works just fine example item:2
//Returns a promise which is resolved with the data/async call simulation
function getData(){
return $timeout(function(){
return [{value:"0",id:0},{value:"0.5",id:0.5},{value:"1",id:1},{value:"1.5",id:1.5},{value:"2",id:2},{value:"2.5",id:2.5},{value:"3",id:3}]
});
}
getData().then(function(data){
$scope.items = data;
});
});
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope , $timeout) {
$scope.selected = {item: 2.5}; //setting an integer options works just fine example item:2
function getData(){
return $timeout(function(){
return [{value:"0",id:0},{value:"0.5",id:0.5},{value:"1",id:1},{value:"1.5",id:1.5},{value:"2",id:2},{value:"2.5",id:2.5},{value:"3",id:3}]
});
}
getData().then(function(data){
$scope.items = data;
});
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
{{selected.item}}
<select ng-model="selected.item" ng-options="item.id as item.value for item in items"></select>
</body>
</html>
一些观察:
使用 track by item.id
works fine.
仅设置 ng-model 以及设置集合 works fine too.
2 个选项在问题场景的 DOM 检查(渲染的 select 选项)中获得 selected
属性。
当 id 为字符串 as well.
时工作正常
如果切换回angular 1.2.x this works just fine
我想知道为什么会这样,或者为什么当 ng-model 为 2.5 v/s 2 时表现不同? 1.3 中 ng-option 用法的任何更改(在更改日志中找不到任何内容)或一般情况下,我是否做错了什么?这是一个错误吗?
非常感谢任何相关的 information/help。
这确实是一个bug,已经logged here跟踪。问题本身提到的选项可以暂时解决这个问题。还要注意 1.4.x 没有这个问题。
我在使用 ng-model 的 ng-option 指令时遇到问题(升级到 1.3 版本后)。当我在异步设置集合之前设置的模型绑定到 ng-option 并且模型是十进制值时(适用于整数)。 FF 没问题,我至少在 IOS safari 和 chrome 中看到问题。
尽你所能see here:
.controller('MainCtrl', function($scope , $timeout) {
$scope.selected = {item: 2.5}; //setting an integer options works just fine example item:2
//Returns a promise which is resolved with the data/async call simulation
function getData(){
return $timeout(function(){
return [{value:"0",id:0},{value:"0.5",id:0.5},{value:"1",id:1},{value:"1.5",id:1.5},{value:"2",id:2},{value:"2.5",id:2.5},{value:"3",id:3}]
});
}
getData().then(function(data){
$scope.items = data;
});
});
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope , $timeout) {
$scope.selected = {item: 2.5}; //setting an integer options works just fine example item:2
function getData(){
return $timeout(function(){
return [{value:"0",id:0},{value:"0.5",id:0.5},{value:"1",id:1},{value:"1.5",id:1.5},{value:"2",id:2},{value:"2.5",id:2.5},{value:"3",id:3}]
});
}
getData().then(function(data){
$scope.items = data;
});
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
{{selected.item}}
<select ng-model="selected.item" ng-options="item.id as item.value for item in items"></select>
</body>
</html>
一些观察:
使用
track by item.id
works fine.仅设置 ng-model 以及设置集合 works fine too.
2 个选项在问题场景的 DOM 检查(渲染的 select 选项)中获得
selected
属性。当 id 为字符串 as well.
时工作正常
如果切换回angular 1.2.x this works just fine
我想知道为什么会这样,或者为什么当 ng-model 为 2.5 v/s 2 时表现不同? 1.3 中 ng-option 用法的任何更改(在更改日志中找不到任何内容)或一般情况下,我是否做错了什么?这是一个错误吗?
非常感谢任何相关的 information/help。
这确实是一个bug,已经logged here跟踪。问题本身提到的选项可以暂时解决这个问题。还要注意 1.4.x 没有这个问题。