AngularJS service之select下拉菜单效果


Posted in Javascript onJuly 28, 2017

本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下

<!-- $watch:持续监听数据上的变化,更新界面 -->
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCtrl">
 <head>
  <meta charset="utf-8">
  <script src="js/angular.js"></script>
 </head>
 <body>
  使用ng-options
  <select ng-model=names[0] ng-options="x for x in names">

  </select><br>

  使用ng-repeat
  <select>
   <option ng-repeat="x in names">{{x}}</option>
  </select><br><br>

   区别<br>
   ng-options更适合来做下拉菜单<br>
   为什么这么说?<br><br><br>
  <div style="color: red">使用ng-repeat操作数组</div><br>
  <select ng-model="selectedSite">
   <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

  </select><br>
  <h1>你选择的是: {{selectedSite}}</h1><br>


  <div style="color: red">使用ng-options操作数组</div><br>
  <select ng-model="selectedSite2" ng-options="x.site for x in sites">

  </select><br>
  <h1>你选择的是: {{selectedSite2.site}}</h1><br>
  <p>网址为: {{selectedSite2.url}}</p><br><br>
  看得出,ng-options操作的是对象 而ng-repeat操作的是字符串
  当选择值是一个对象时,我们就可以获取更多信息,应用也更灵活。<br><br><br><br>

  <div style="color: red">使用ng-options来操作对象</div>
  <select ng-model="selectedSite3" ng-options="x for (x, y) in sites2">
  </select><br>
  <h1>你选择的值是: {{selectedSite3}}</h1><br><br><br><br>

  <p>选择一辆车:</p><br>

  <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
  </select><br>

  <h1>你选择的是: {{selectedCar.brand}}</h1><br>
  <h2>模型: {{selectedCar.model}}</h2><br>
  <h3>颜色: {{selectedCar.color}}</h3><br>

  <p>注意选中的值是一个对象。</p>

 </body>
 <script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
   $scope.names = ["Google", "Runoob", "Taobao"];
   $scope.sites = [
      {site : "Google", url : "http://www.google.com"},
      {site : "Runoob", url : "http://www.runoob.com"},
      {site : "Taobao", url : "http://www.taobao.com"}
      ];
   $scope.sites2 = {
      site01 : "Google",
      site02 : "Runoob",
      site03 : "Taobao"
      };
   $scope.cars = {
      car01 : {brand : "Ford", model : "Mustang", color : "red"},
      car02 : {brand : "Fiat", model : "500", color : "white"},
      car03 : {brand : "Volvo", model : "XC90", color : "black"}
      }
  });
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
基于Angularjs实现分页功能
May 30 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 #Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 #Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 #Javascript
基于JS实现移动端左滑删除功能
Jul 28 #Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 #Javascript
webpack实现热更新(实施同步刷新)
Jul 28 #Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 #Javascript
You might like
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
python之super的使用小结
2018/08/13 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python-接口开发入门解析
2019/08/01 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
用python写爬虫简单吗
2020/07/28 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
幼儿园教师请假制度
2014/01/16 职场文书
《我的信念》教学反思
2014/02/15 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL