<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<select ng-model="data" >
<option value="">选择地址</option>
<option ng-repeat="x in name">{{x}}</option>
</select>
</div>

<div ng-app="app1" ng-controller="myctrl1" id="a">
<select ng-options="x for x in name" ng-model="name">//必须添加ng-model
<option value=""></option>
</select>

<select ng-model="p" ng-options="x.id as x.name for x in gg"></select>//便利数组对象

{{p}}//输出对象的ID

<select ng-model="a" ng-options="x.id as x.name group by x.key for x in gs"></select>//便利jeson并分组

</div>
</body>
<script src="js/angurlar素材/angular/angular.js"></script>
<script>
var app =angular.module("myapp",[]).controller("myctrl",function($scope){
$scope.name=["关关","xsss","sss"]

});//运用ng-repeat完成项目

var a=document.querySelector("#a");
console.log(a)
angular.module("app1",[]).controller("myctrl1",function($scope){
$scope.name=["关关","x","sss"]//定义数组

$scope.gg=[{id:1,name:"guanguan"}

　　　　　　　{id:2,name:"kankang"}　

]

$scope.gs=[
{id:1,name:"关关",key:"我的好友"},
{id:2,name:"中中",key:"我的好友"},
{id:3,name:"亮亮",key:"我的好友"},
{id:4,name:"小小",key:"黑名单"},
]

});//运用ng-options完成
angular.bootstrap(a,["app1"])//运用bootstrop完成多个模块加载
</script>
</html>

ng-select 下拉的两种方式的更多相关文章

  1. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

  2. SpringMVC之ajax+select下拉框交互常用方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Spring IOC 依赖注入的两种方式XML和注解

    依赖注入的原理 依赖注入的方式---XML配置 依赖注入的方式---注解的方式 Spring 它的核心就是IOC和AOP.而IOC中实现Bean注入的实现方式之一就是DI(依赖注入). 一 DI的原理 ...

  4. HTTP/HTTPS GET&POST两种方式的实现方法

    关于GET及POST方式的区别请参照前面文章:http://www.cnblogs.com/hunterCecil/p/5698604.html http://www.cnblogs.com/hunt ...

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

    1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码   <!DOCTYPE html> <html&g ...

  6. EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  7. ListView下拉刷新及上拉更多两种状态

    一.前言: 很多应用都会用到ListView,当然如果是iOS就会用UITableViewController,这两个控件在不同的OS上,功能是一样的,只是有些细微的不同(iOS的UITableVie ...

  8. CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)

    CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...

  9. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

随机推荐

  1. STL --> set用法

    set用法 一.set和multiset基础 set和multiset会根据特定的排序准则,自动将元素进行排序.不同的是后者允许元素重复而前者不允许. 需要包含头文件: #include <se ...

  2. 基于FPGA的Cordic算法实现

    CORDIC(Coordinate Rotation Digital Computer)算法即坐标旋转数字计算方法,是J.D.Volder1于1959年首次提出,主要用于三角函数.双曲线.指数.对数的 ...

  3. 指令-arModal-点击提示框模板

    html 使用<ar-modal></ar-modal>: <ar-modal modal-obj="modalObj" ok="newAl ...

  4. C语言程序设计（基础）- 第6周作业

    一.PTA作业 完成PTA第六周作业中4个题目的思路列在博客中. 1.7-1 高速公路超速处罚 2.7-2 计算油费 3.7-3 比较大小 4.7-4 两个数的简单计算器 (必须使用switch结构实 ...

  5. Alpha冲刺置顶随笔

    项目名称:城市安全风险管控系统 小组成员: 张梨贤.林静.周静平.黄腾飞 Alpha冲刺随笔 Alpha冲刺Day1:http://www.cnblogs.com/linlkg/p/7896980.h ...

  6. 个人作业2：QQ音乐APP案例分析

    APP案例分析 QQ音乐 选择理由:毕竟作为QQ音乐九年的资深老用户以及音乐爱好者 第一部分 调研 1.第一次上手的体验    我算是很早期的QQ音乐的用户,用QQ音乐七八年,除了体验各方面还不错之外 ...

  7. AWS EMR上搭建HBase环境

    0. 概述 AWS的EMR服务为客户提供的托管 Hadoop 框架可以让您轻松.快 速.经济高效地在多个动态可扩展的 Amazon EC2 实例之间分发和处理 大量数据.您还可以运行其他常用的分发框架 ...

  8. 《高级软件测试》11.15.全组完成jira安装，开始任务的部分书写

    今日任务完成情况如下: 小段:完成linux环境上jira的安装,并将jira的安装过程录制下来 小费:完成linux环境下jira的安装,开始部分任务的书写 小高:完成了jira的安装,并进一步熟悉 ...

  9. ruby：TypeError: 对象不支持此属性或方法

    解决办法. 1.下载对应版本 下载node.js,根据ruby版本决定下载32还是x64,我的ruby版本x64 https://npm.taobao.org/mirrors/node/v8.9.3/ ...

  10. Raid5两块硬盘掉线可以恢复数据吗_raid数据恢复案例分享

    本案例中发生故障的存储类型是HP P2000,虚拟化平台为vmware exsi,共有10块硬盘组成raid5(硬盘容量为1t,其中6号盘是热备盘),由于某些故障导致阵列中两块硬盘亮黄灯掉线,硬盘无法 ...