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 相关文章推荐
可选择和输入的下拉列表框示例
Nov 05 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Windows下python3.6.4安装教程
2018/07/31 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Python hashlib模块实例使用详解
2019/12/24 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
试用期员工考核制度
2014/01/22 职场文书
车队司机自我鉴定
2014/03/02 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
校长寄语大全
2014/04/09 职场文书
2014年征兵标语
2014/06/20 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Java实现简单小画板
2022/06/10 Java/Android