角度 ng 选择在 1.3 >版本中不起作用
Angular ngSelected not working in version > 1.3
Markup:
<!DOCTYPE html>
<html ng-app="test">
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<h1>Hello Plunker!</h1>
<select ng-model="user.item_id">
<option ng-selected="i.id == user.item_id" ng-repeat="i in items" value={{i.id}}>{{i.name}}</option>
</select>
</body>
</html>
.JS:
var module = angular.module("test", []);
module.controller('ctrl', function($scope){
$scope.items = [
{id: 1, name: 'foo'},
{id: 2, name: 'bar'},
{id: 3, name: 'baz'},
];
$scope.user = {};
$scope.selectedItem = {id: 1};
$scope.user.item_id = $scope.selectedItem.id;
});
普伦克:https://plnkr.co/edit/7oi4KwzMhGi3kdltSklg?p=preview
问题:如果您检查select
的 html 代码,您将看到 HTML selected
属性放置正确。
但是,它不会显示为突出显示的选项。为什么?
== 编辑 ==
该 plunker 代码在 angular 1.3.20 上按预期工作,但在 1.4.x 或 1.5.x 中被破坏
工作压榨机:https://plnkr.co/edit/0ApQeZ6Kar2yQisELXfT?p=preview
== 编辑2 ==
我已经在angularjs队列上发出了一张票:https://github.com/angular/angular.js/issues/14876#issuecomment-231010972
基本上,他们说我们应该坚持使用ngOptions,尽管他们不知道为什么ngSelected被破坏了。
好吧,你可以改用ng-options...
<select ng-model="user.item_id" ng-options="i.id as i.name for i in items">
</select>
在这里查看 https://plnkr.co/edit/G4Hu4ZpShaUPCE5zTsdV
我没有看到这适用于您提到的任何版本。无论如何,检查这个 plunker
https://plnkr.co/edit/V0ybr70kRpkcaxLKBHTK?p=preview
您编写选择的方式,我可以在任何输入上重现相同的内容。原因是因为角度绑定不是如何工作的,你的选择对他的模型一无所知,除非你改变模型(即使用ng-init
)。
使用这种方式:
<option ng-selected="i.id == user.item_id" ng-repeat="i in items" value={{i.id}}>{{i.name}}</option>
并不意味着您的模型将更新,它只会更新 DOM 元素。
- 一页签出在Magento版本1.7.0.2中不起作用
- pixijs 鼠标关闭事件不起作用(任何版本)
- 为什么我的谷歌浏览器扩展程序在谷歌浏览器版本 41.0.2272.89 中不起作用
- Phonegap (Android) - 数据库更改版本不起作用
- jquery.min.js版本冲突在asp.net网站中不起作用
- Kineticjs:drag.moving 事件在最新版本上不起作用.如何升级代码
- Jssor 全长滑块在 opera 9.64 版本中不起作用
- Chrome 消息:chrome.runtime.sendMessage 在最新版本 49 上不起作用
- jQuery 引导选项卡在自定义模式中不起作用(不是引导模式,而是我自己的版本)
- Javascript 函数在 IE(仅限)版本 9 - 10 上不起作用
- 画布元素在 IE 8 及更低版本中不起作用
- html下拉菜单在Firefox中不起作用,并且在旧版本的IE中一切都是错误的
- 砌体在移动浏览器(chrome)上不起作用,并且仅在Chrome桌面版本上有效,如果我重新加载(ctrl + f5)页面
- Meteor 1.2.1 版本 服务器代码中的 Meteor.method({}) 不起作用
- Jquery 切换/单击在早于 9 的 Safari 版本中不起作用
- 尽管使用了最新的 angularJS 版本,但 ng-repeat-start 不起作用的任何原因
- jquery Animate 在 IE9 及更早版本中不起作用
- 上传 - HTML5 版本 文件扩展名不起作用
- 动态版本中的类不起作用
- nvm node.js使用的版本不起作用