ng-select 下拉的两种方式
<!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 下拉的两种方式的更多相关文章
- js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言
js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...
- SpringMVC之ajax+select下拉框交互常用方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Spring IOC 依赖注入的两种方式XML和注解
依赖注入的原理 依赖注入的方式---XML配置 依赖注入的方式---注解的方式 Spring 它的核心就是IOC和AOP.而IOC中实现Bean注入的实现方式之一就是DI(依赖注入). 一 DI的原理 ...
- HTTP/HTTPS GET&POST两种方式的实现方法
关于GET及POST方式的区别请参照前面文章:http://www.cnblogs.com/hunterCecil/p/5698604.html http://www.cnblogs.com/hunt ...
- 在angular中实现下拉框的两种方式 ng-repeat和 ng-option
1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码 <!DOCTYPE html> <html&g ...
- EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))
一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...
- ListView下拉刷新及上拉更多两种状态
一.前言: 很多应用都会用到ListView,当然如果是iOS就会用UITableViewController,这两个控件在不同的OS上,功能是一样的,只是有些细微的不同(iOS的UITableVie ...
- CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)
CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...
- .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格
一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...
随机推荐
- 安装Oracle客户端和plsql
Oracle 客户端安装 + pl/sql工具安装配置 Oracle 客户端安装 + pl/sql工具安装配置 下载oracle客户端,并在本地安装. 11g下载地址为: http://www ...
- 解决NSURLConnection finished with error - code -1100错误
更新到xcode9以后,拖进工程中一个html文件,webview加载这个文件,xcode一直抛出 NSURLConnection finished with error - code -1100异常 ...
- 1.由浅入深解析 SimpleDateFormat
一.SimpleDateFormat简介 SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (date -> text).语法分析 (text - ...
- JavaScript(第二十二天)【动态加载js和css】
学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式. 一.元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...
- Idea简单SpringMVC框架配置
前边已经介绍过了Struts在Idea上的配置,相对于Struts来说,我觉得SpringMVC有更多的优势,首先Struts是需要对action进行配置,页面发送不同的请求,就需要配置不同的acti ...
- 2017级C语言教学总结
一个学期下来,对于这门课教学还是感受挺多,多个教学平台辅助,确实和我前10年的教学方式区别很多,也辛苦很多. 一.课堂教学方面 1.课堂派预习作业 主要借助课堂派平台,每次课前发布预习作业.而预习作业 ...
- C语言第三次作业总结
本次作业的亮点 总体情况 大部分同学基本掌握了单层循环结构的写法,懂得了代码调试的过程 PTA通过率及作业质量都不错,希望再接再厉 推荐博客 黄毓颖 推荐理由:代码思路清晰,格式良好:调试过程相当形象 ...
- 网络1712--c语言一二维数组作业总结
1.成绩摆前头 1.1基本要求(1分) 按时交 - 有分 未交 - 0分 迟交一周以上 - 倒扣本次作业分数 抄袭 - 0分 泛泛而谈(最多七分) 1.2评分要点 PTA作业总结(4分) 同学代码互评 ...
- Beta冲刺-用户测试报告
一.项目概述 1.1项目名称 高校学生征信系统 1.2项目简介 此项目基于SSH框架,力图为学生提供征信服务和信用相关的借款和申请活动.其中以信用统计和管理为主,信用使用为辅,构建出一个集信用收集和使 ...
- 201621123040《Java程序设计》第六周学习总结
1.本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结 2.书面作业 2.1clone方法 2.1.1在te ...