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 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
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
第五节--克隆
2006/11/16 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python实现包含min函数的栈
2016/04/29 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python如何实现邮件功能
2020/05/27 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
优秀经理事迹材料
2014/02/01 职场文书
主题团日活动总结
2014/06/25 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
投诉书格式范本
2015/07/02 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript