当前位置:Gxlcms > JavaScript > AngularJS中下拉框的基本用法详解

AngularJS中下拉框的基本用法详解

时间:2021-07-01 10:21:17 帮助过:2人阅读

本文主要介绍了AngularJS中下拉框的基本用法,结合具体实例形式分析了AngularJS下拉框的元素绑定、选中及显示等功能实现方法,需要的朋友可以参考下,希望能帮助到大家。

HTML正文:


<p ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
等价于:
<select>
<option ng-repeat="item in names">{{item}}</option>
</select>
<hr>
<!-- ng-repeat绑定的值为一个字符串,ng-options绑定的为一个对象 -->
<select ng-model="selectedSIte">
<option ng-repeat="item in sites" value="{{item.url}}">{{item.site}}</option>
</select>
<span>你选中的选址:{{selectedSIte}}</span>
<br><br>
<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
<span>你选中的选址:{{selectedSite}}</span>
<hr>
<!-- 因为对象数组没有key,angular默认使用数组的下标值作为key显示 -->
<select ng-model="AAAA" ng-options="x for (x, y) in sites"></select>
<span>你选择的值是: {{AAAA}}</span>
</p>

Javascript操作代码:


效果:

相关推荐:

AngularJS中下拉框的高级用法实例讲解

js和jQuery以及easyui实现对下拉框的指定赋值实例分享

jQuery模拟下拉框选择对应菜单

以上就是AngularJS中下拉框的基本用法详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行