最近在项目中使用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. vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图

    vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现.目前已实际应用于滴滴四大金融业务板块的1 ...

  2. jw player 配置参数

    Loading the player … //player所在div //具体配置参数 jwplayer(“container”).setup({//通过js调用播放器并安装到指定容器(contain ...

  3. jQuery事件绑定与常用事件

    jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑 ...

  4. Python 协程并发爬虫网页

    简单爬虫实例: 功能:通过urllib.request实现网站爬虫,捕获网站内容. from urllib import request def f(url): print("GET:%s& ...

  5. 一次聊天引发的思考--java并发包实战

    一次聊天,谈到了死锁的解决.可重入锁等等,突然发现这些离自己很远,只有一些读书时的概念涌入脑海,但各自的应用场景怎么都无法想出.痛定思痛,决定看看concurrent包里涉及并发的类及各自的应用场景. ...

  6. 自制操作系统Antz(4)——进入保护模式 (下) 实现内核并从硬盘载入

    Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.html Linux内核源码分析地址:https://www.cnblogs. ...

  7. 2018.9.25 NOIP模拟赛

    *注意:这套题目应版权方要求,不得公示题面. 从这里开始 Problem A XOR Problem B GCD Problem C SEG 表示十分怀疑出题人水平,C题数据和标程都是错的.有原题,差 ...

  8. servlet数据库登录

    一.首先建立如下目录: 二.在html文件中编写代码 三.编写实体类 四.编写服务器相关代码 五.编写数据库代码 六.运行截图 输入错误: 输入正确: 链接:https://pan.baidu.com ...

  9. jackson中@JsonProperty、@JsonIgnore等常用注解总结

    本文为博主原创,未经允许不得转载: 最近用的比较多,把json相关的知识点都总结一下,jackjson的注解使用比较频繁, jackson的maven依赖 <dependency> < ...

  10. vue脚手架的目录结构

    . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 ...