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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
基于Bootstrap表单验证功能
Nov 17 Javascript
对vuex中store和$store的区别说明
Jul 24 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python中ConfigParse模块的用法
2014/09/29 Python
Python命令行解析模块详解
2018/02/01 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
水务局局长岗位职责
2013/11/28 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书