ng中的下拉框动态加载数据,完成双向绑定

如图所示,完成一个下拉框


image.png
image.png

静态页

<select class="form-control"  ng-model="fruit" ng-init="fruit='0'">
 <option value="0">-选项-</option>
 <option value="1">苹果</option>
 <option value="2">香蕉</option>
 <option value="3">葡萄</option>
 <option value="4">西瓜</option>
</select>

我们可以ng-model双向绑定一个变量,ng-init初始化一个0,下拉框初始化就默认是value为0的选项

动态获取数据

这里有两种方式
1、ng-repeat

<select class="form-control" ng-model="fruit" ng-init="fruit='0'">
 <option value="0">-选项-</option>
 <option ng-repeat="f in fruitList" value="{{f.values}}">{{f.name}}</option>
</select>

js中$scope.fruitList是请求服务器获取的数据
2、ng-option

<select  class="form-control" ng-model="fruit"  ng-init="fruit='0'"
ng-options="f.values as f.name for f in fruitList">
 <option value="0">-选项-</option>
</select>

关于ng-option更多参考
http://www.jb51.net/article/67909.htm
运行效果
http://sandbox.runjs.cn/show/nhi8ubrb

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容