在angular中实现下拉框的两种方式 ng-repeat和 ng-option

1. ng-repeat实现下拉框:

select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建

实现源码

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>AngularJS之下拉框(方式二)</title>

<script type="text/javascript" src="../js/angular.min.js" ></script>

<script>

var app = angular.module("secondApp",[]);

app.controller("secondCon",function($scope){

$scope.trees = ["松树","樟树","枫树","枣树","桃树"];

});

</script>

</head>

<body>

<div ng-app="secondApp" ng-controller="secondCon">

<select style="width: 200px;">

<option ng-repeat="tree in trees">{{tree}}</option>

</select>

</div>

</body>

</html>

2.ng-option指令使用很简单,只需要绑定两个属性:

一个是ng-model用于获取选定的值;

另一个是ng-options用于确定下拉列表的元素数组。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每一个值。数据如下:

$scope.engineer = {
                name: "Dani",
                currentActivity: "Fixing bugs"
            };

            $scope.activities =
            [
                "Writing code",
                "Testing code",
                "Fixing bugs",
                "Dancing"
            ];
时间: 2024-11-05 20:29:10

在angular中实现下拉框的两种方式 ng-repeat和 ng-option的相关文章

android中自定义下拉框(转)

android自带的下拉框好用不?我觉得有时候好用,有时候难有,项目规定这样的效果,自带的控件实现不了,那么只有我们自己来老老实实滴写一个新的了,其实最基本的下拉框就像一些资料填写时,点击的时候出现在编辑框的下面,然后又很多选项的下拉框,可是我在网上找了一下,没有这种下拉框额,就自己写了一个,看效果图先: ,这个是资料填写的一部分界面,三个下拉框,选择故乡所在地: 点击之后弹出下拉框,选择下面的选项: 三个下拉框时关联的,第一个决定了第二数据内容,第二个决定了第三个数据内容,如果三个全部选好之后

ASP.NET MVC中的cshtml页面中的下拉框的使用

ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

jQuery自定义漂亮的下拉框插件8种效果演示

原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html lang="en" class=

C语言中存储多个字符串的两种方式

C语言中存储多个字符串的两种方式 方式一    二维字符串数组 声明: char name[4][10] = { "Justinian", "Momo", "Becky", "Bush" }; 在内存中的存储: J u s t i n i a n \0 M o m o \0 \0 \0 \0 \0 \0 B e c k y \0 \0 \0 \0 \0 B u s h \0 \0 \0 \0 \0 \0 这种方式会造成内存空间

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"<option value=''>=全部=</option>". 但怎么也添加不成功. 首先试了直接用jquery对该下拉列表进行添加操作: JavaScript code ? 1 2 3 4 5 6 7 8 $('#selUnin').combobox({         url: _callback_url + '&

.NET MVC中给下拉框填充数据

在MVC 中绑定模型的视图,很多时候都会用到下拉框,所以在此记录一下根据DataTable中的数据给下拉框填充数据的方法 1 /// <summary> 2 /// 将 DataTable 转成下拉框的填充数据List<SelectListItem>类型 3 /// </summary> 4 /// <param name="dt">数据DataTable</param> 5 /// <param name="

android-theme中修改actionmode中more下拉框的背景颜色

今天在做图库修改是,需要修改图库的actionbar某个按钮弹出来的下拉框的背景颜色,在网上找了个方法尝试下,没有打到自己的要求,不过阴差阳错的却修改了more下拉框的背景,再次记录下,也许以后能用的到. 代码 <style name="Theme.FunuiGallery" parent="android:Theme.Funui"> <item name="listPreferredItemHeightSmall">48

bootstrap中selectpicker下拉框使用方法实例

最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css    bootstrap-select.m

带输入查询功能匹配下拉框的几种实现方式

在Web开发中我们经常需要用户进行输入操作,输入框内我们输入几个字,输入框就会出现下拉提示你可能要输入的完整信息.下面我总结了几种常见的方案: 一:EasyUi combobox 组合框 具体使用方法官方文档上有详细介绍:http://www.jeasyui.net/plugins/169.html. 当然,你若觉得样式不怎么好看,引入easyui的 js 和css,可以进行简单的样式调整如下: .textbox { webkit-border-radius: 0px; border-radiu