最近在项目中使用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的正确姿势的更多相关文章

  1. 【原创】Mysql中select的正确姿势

    引言 大家在开发中,还有很多童鞋在写查询语句的时候,习惯写下面这种不规范sql select * from table 而不写成下面的这种规范方式 select col1,col2,...,coln ...

  2. Mysql中select的正确姿势

    引言 大家在开发中,还有很多童鞋在写查询语句的时候,习惯写下面这种不规范sql select * from table 而不写成下面的这种规范方式 select col1,col2,...,coln ...

  3. DataGridView绑定DataTable的正确姿势

    1. 将DataTable 绑定到BindingSource 2. 将BindingSource绑定到DataGridView 3. DataGridView修改完要从Datatable取值时,同步过 ...

  4. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  5. Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)

    笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...

  6. 59.phpstudy升级Mysql的正确姿势

    phpstudy升级Mysql的正确姿势 phpstudy很糟心,不能选择mysql的版本,所以就强制升级. 下载mysql 首先要到官网上去下载你想要的mysql版本. 下载网址:Mysql官网地址 ...

  7. AngularJS的select设置默认值

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...

  8. 调用 TBrowseForFolder 的正确姿势

    [教程]调用 TBrowseForFolder 的正确姿势 2017-08-22 • C++ Builder.Delphi.教程 • 暂无评论 • swish •浏览 562 次 TBrowseFor ...

  9. 代码走查25条疑问 C# 跳转新的标签页 C#线程处理 .Net 特性 attribute 学习 ----自定义特性 看懂 ,学会 .NET 事件的正确姿势-简单版

    代码走查25条疑问   代码走查(Code Review) 是一个开发人员与架构师集中讨论代码的过程.通过代码走查可以提高代码的 质量,同时减少Bug出现的几率.但是在小公司中并没有代码走查的过程在这 ...

随机推荐

  1. servlet injection analysis

    一. Spring不能通过注解向Servlet中注入实例的原理 想了解此问题的原理,就要了解tomcat启动后 servlet和spring的加载顺讯. 1.  tomcat启动后先加载web.xml ...

  2. MySQL5.7 多源复制监控脚本

    #!/bin/bash :<<BLOCK Version : v1.0 2018-12-21 MySQL多源复制检测脚本 监控配置放在 $CONFIG_FILE 中,内容如下 #mysql ...

  3. Python引用拷贝赋值

    先安利一个网站,对学习编程很有帮助:http://www.pythontutor.com/ 可以逐行可视化执行代码,具体自行体验啦 这个网站也是我在看别人的博文时候找到的,也先贴上别人的理解吧,我觉得 ...

  4. MySQL 实战笔记

    01 | 基础架构:一条SQL查询语句是如何执行的? 大体可以分为: Server 层:包含了连接器.查询缓存.分析器.优化器.执行器,跨存储引擎的功能都在这一层实现的,比如存储过程.触发器.视图等. ...

  5. Greeting Card

    问题 G: Greeting Card 时间限制: 1 Sec  内存限制: 128 MB 提交: 666  解决: 59 [提交] [状态] [命题人:admin] 题目描述 Quido plans ...

  6. loj#2483. 「CEOI2017」Building Bridges 斜率优化 cdq分治

    loj#2483. 「CEOI2017」Building Bridges 链接 https://loj.ac/problem/2483 思路 \[f[i]=f[j]+(h[i]-h[j])^2+(su ...

  7. java中Map集合的常用方法

    Map集合和Collection集合的区别 Map集合是有Key和Value的,Collection集合是只有Value. Collection集合底层也是有Key和Value,只是隐藏起来. V p ...

  8. CSS布局学习(三) - position属性定义及解释(官网直译)

    static ①元素的位置是在文档正常布局流中的位置. ②设置top right bottom left与z-index无效. ③在未指定position时,static是默认值 以下例子进行说明: ...

  9. scp免密操作

    scp免密操作 2.1服务器(本机)从目标服务器上传/下载文件或者文件夹 2.2生成秘钥 本机执行:ssh-keygen -t rsa 遇到提示,直接回车就OK,秘钥生成在用户的根目录的.ssh目录下 ...

  10. java基础 (三)之ConcurrentHashMap(转)

    一.背景: 线程不安全的HashMap     因为多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap.   效率低下的H ...