AngularJS中ng-options简单用法及预选项失败的原因
2016-04-07 18:51
381 查看
刚刚接触AngularJs,记录一下ng-options的使用。
1、构造key-value数据
2、绑定
ng-options="t.id as t.type for t in types" 代表生成的option标签 <option value="t.id"> t.type</option>
在使用当中需要下拉框默认显示 BB 这条数据,开始以为 $scope.selectType=2 就可以让下拉框默认显示BB,结果失败了。
查资料发现:
ng-model 是通过引用而不是通过值来控制model的。
上述例子中,想预选中BB标签,然后将id=2复制给model,只是将数值传给了model,并不能得到预期的效果。
需要将BB的引用传给model。 $scope.selectType=$scope.types[1].id
此外还需到此问题:
html标签:
数据:
需要给select标签设置默认选项,指令如下:
$scope.aa={b:"1"}; 下拉框将默认显示为“aaaa”
1、构造key-value数据
$scope.types = [ {id:"1",type:"AA"}, {id:"2",type:"BB"}, {id:"3",type:"CC"} ];
2、绑定
<select ng-model="selectType" ng-options="t.id as t.type for t in types"> <option values=""></option> </select>
ng-options="t.id as t.type for t in types" 代表生成的option标签 <option value="t.id"> t.type</option>
在使用当中需要下拉框默认显示 BB 这条数据,开始以为 $scope.selectType=2 就可以让下拉框默认显示BB,结果失败了。
查资料发现:
ng-model 是通过引用而不是通过值来控制model的。
上述例子中,想预选中BB标签,然后将id=2复制给model,只是将数值传给了model,并不能得到预期的效果。
需要将BB的引用传给model。 $scope.selectType=$scope.types[1].id
此外还需到此问题:
html标签:
<select class="form-control" ng-model="aa.b" ng-options="zp.id as zp.name for zp in zps"> </select>
数据:
$scope.zps=[ {id:"1",name:"aaaa"}, {id:"2",name:"bbbb"}, {id:"3",name:"bbbc"} ];
需要给select标签设置默认选项,指令如下:
$scope.aa={b:"1"}; 下拉框将默认显示为“aaaa”
相关文章推荐
- angularjs注意点
- 通过路由管理视图间切换 - AngularJS路由解析
- AngularJs 过滤器
- AngularJs 简单数据绑定
- AngularJs 使用 $timeout
- Angularjs基础教程
- AngularJs 弹出模态框(model)
- 详解AngularJS 模态对话框
- 理解angular中的module和injector,即依赖注入
- AngularJS 模态对话框
- AngularJS 1.x学习<2>
- [置顶] 跟我学AngularJs:AngularJs入门及第一个实例
- [Angular 2] *ngFor with index
- AngularJS 1.x学习<1>
- 详解AngularJS 模态对话框
- AngularJs 弹出模态框(model)
- angularjs 前端页面之用户修改密码
- angularjs中动态为audio绑定src
- AngularJS 最常用的八种功能
- angularjs自定义过滤器demo