AngularJS实现select的ng-options功能示例


Posted in Javascript onJuly 12, 2017

本文实例讲述了AngularJS实现select的ng-options功能。分享给大家供大家参考,具体如下:

controller

.controller('MainController', function($scope, $http, $ionicModal, $timeout) {
    var post = {};
    $http.get("data/themeData.json")
      .success(function(response) {
        $scope.themeData = response.themeData;
      });
    $ionicModal.fromTemplateUrl('templates/post.html', {
      scope: $scope
    }).then(function(modal) {
      $scope.modal = modal;
    });
    $scope.postShow = function() {
      post = $scope.post = {};
      $scope.modal.show();
    };
    $scope.cancelPost = function() {
      $scope.modal.hide();
    };
    $scope.doPost = function() {
      console.log('doPost-----');
      console.log(post);
      $timeout(function() {
        $scope.cancelPost();
      }, 1000);
    };
  })

html

<ion-modal-view>
<form name="post_form">
 <ion-header-bar>
   <button class="button button-icon icon ion-ios-arrow-back" ng-click="cancelPost()"></button>
   <h1 class="title">发帖</h1>
   <button class="button button-icon icon ion-forward" ng-disabled="post_form.$invalid" ng-click="doPost()"></button>
 </ion-header-bar>
 <ion-content>
   <div class="list">
    <label class="item item-input myLabel">
     <input type="text" placeholder="标题" ng-model="post.title" required/>
    </label>
    <label class="item item-input myLabel2">
     <select class="mySelect col" ng-model="post.kmForumCategoryId" ng-options="theme.id as theme.name for theme in themeData" required>

<!-- 添加了id属性作为option的value -->
      <option value="">选择主题分类</option>
     </select>
    </label>
    <label class="item item-input myLabel">
     <textarea class="post_content" placeholder="内容" ng-model="post.content" required></textarea>
    </label>
   </div>
 </ion-content>
</form>
</ion-modal-view>

实现的DOM

<select class="mySelect col ng-pristine ng-untouched ng-invalid ng-invalid-required" ng-model="post.kmForumCategoryId" ng-options="theme.id as theme.name for theme in themeData" required="">
<option value="">选择主题分类</option>

<option value="0" label="主题111">主题111</option>

<option value="1" label="主题222">主题222</option>

<option value="2" label="有没问题">有没问题</option>

<option value="3" label="测试112">测试112</option>

<option value="4" label="你好">你好</option>

<option value="5" label="主题">主题</option>

<option value="6" label="测试000">测试000</option>
</select>

可以用ng-change事件监控来看看输出的是什么

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 #Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 #Javascript
详解Node项目部署到云服务器上
Jul 12 #Javascript
angular.js中解决跨域问题的三种方式
Jul 12 #Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 #Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 #Javascript
Bootstrap提示框效果的实例代码
Jul 12 #Javascript
You might like
基于mysql的论坛(6)
2006/10/09 PHP
php单例模式实现方法分析
2015/03/14 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
简单谈谈json跨域
2016/03/13 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
python备份文件的脚本
2008/08/11 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
【python】matplotlib动态显示详解
2019/04/11 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
挖掘机司机岗位职责
2014/02/12 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS