angularJs绑定select的正确姿势
最近在项目中使用ionic,需要在页面上绑定一个年份下拉框,默认选中当前年,并且在下拉框的change事件中增加一些业务逻辑。
不管是使用ng-repeat还是ng-options,都是各种坑:默认选中、触发change事件、change后绑定的年份值(select的ng-model),三者中总有不能正常工作的。此处省略1000字,全是血泪....
最后发现,要想让select正常工作:
1、要使用ng-options,不要用ng-repeat
2、ng-options绑定的集合元素,必须是对象,不能是简单的字符串
3、select的ng-model必须绑定对象,而不是简单的字符串
上代码:
1、html部分:
<select ng-model="statYear.selected" ng-change="loadStat();" ng-options="y.val as y.text for y in years"> 2、js部分:
$scope.years=[]; var now=new Date();
var thisYear=now.getFullYear();
for(var i=2018;i<=(thisYear+1);i++){
var obj={val:i,text:i+"年"};
$scope.years.push(obj);
} $scope.statYear={
selected:thisYear
}
angularJs绑定select的正确姿势的更多相关文章
- 【原创】Mysql中select的正确姿势
引言 大家在开发中,还有很多童鞋在写查询语句的时候,习惯写下面这种不规范sql select * from table 而不写成下面的这种规范方式 select col1,col2,...,coln ...
- Mysql中select的正确姿势
引言 大家在开发中,还有很多童鞋在写查询语句的时候,习惯写下面这种不规范sql select * from table 而不写成下面的这种规范方式 select col1,col2,...,coln ...
- DataGridView绑定DataTable的正确姿势
1. 将DataTable 绑定到BindingSource 2. 将BindingSource绑定到DataGridView 3. DataGridView修改完要从Datatable取值时,同步过 ...
- AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...
- Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)
笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...
- 59.phpstudy升级Mysql的正确姿势
phpstudy升级Mysql的正确姿势 phpstudy很糟心,不能选择mysql的版本,所以就强制升级. 下载mysql 首先要到官网上去下载你想要的mysql版本. 下载网址:Mysql官网地址 ...
- AngularJS的select设置默认值
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...
- 调用 TBrowseForFolder 的正确姿势
[教程]调用 TBrowseForFolder 的正确姿势 2017-08-22 • C++ Builder.Delphi.教程 • 暂无评论 • swish •浏览 562 次 TBrowseFor ...
- 代码走查25条疑问 C# 跳转新的标签页 C#线程处理 .Net 特性 attribute 学习 ----自定义特性 看懂 ,学会 .NET 事件的正确姿势-简单版
代码走查25条疑问 代码走查(Code Review) 是一个开发人员与架构师集中讨论代码的过程.通过代码走查可以提高代码的 质量,同时减少Bug出现的几率.但是在小公司中并没有代码走查的过程在这 ...
随机推荐
- 牛客网 完数VS盈数
题目链接:https://www.nowcoder.com/practice/ccc3d1e78014486fb7eed3c50e05c99d?tpId=40&tqId=21351&t ...
- python的变量和简单的数据类型
决定学习python这门语言了,本人资质愚钝,只会把学到的东西记录下来,供自己查漏补缺,也可以分享给和我一样正在学习python语言的人,若在记录中存在什么错误,希望多多批评指正,谢谢. Python ...
- 详解 Nginx如何配置Web服务器
概述 在高层次上,将NGINX配置作为Web服务器有一些问题需要了解,定义它处理哪些URL以及如何处理这些URL上的资源的HTTP请求. 在较低层次上,配置定义了一组控制对特定域或IP地址的请求的处理 ...
- docker之Dockerfile实践
上一篇介绍了Dockerfile中使用的指令,现在开始进行指令实践 先查看下本地的镜像,选一个作为base image: [root@docker ~]# docker images REPOSITO ...
- 关于变量,JAVA基本数据类型,运算符类型,如何从控制台接收输入的数据
一,变量与变量的使用 1.变量是在程序运行中其值可以改变的量,java程序的一个基本存储单元 2.变量的使用 变量类型+变量名 二,JAVA基本数据类型 1.数值型a.整点类型(byte.short. ...
- Kaggle比赛NCFM图像分类任务简介
为了保护和监控海洋环境及生态平衡,大自然保护协会(The Nature Conservancy)邀请Kaggle社区的参赛者们开发能够出机器学习算法,自动分类和识别远洋捕捞船上的摄像头拍摄到的图片中鱼 ...
- url接收传参
下面是接收传参的代码: 方法一: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + ...
- _recruit
- 【转载】URL编码与两次encodeURI
当使用地址栏提交查询参数时,如果不编码,非英文字符会按照操作系统的字符集进行编码提交到服务器,服务器会按照配置的字符集进行解码,所以如果两者不一致就会导致乱码. encodeURI函数采用UTF-8对 ...
- ehcache 简介和基本api使用
文章转载自: https://blog.csdn.net/zhouzhiwengang/article/details/59838105 1.ehcahce简介 在开发高并发量,高性能的网站应用系统时 ...