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中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
Vue 事件处理操作实例详解
Mar 05 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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
php 页面执行时间计算代码
2008/12/04 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
javascript静态的url如何传递
2007/05/03 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python学生信息管理系统修改版
2018/03/13 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
对Python函数设计规范详解
2019/07/19 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
python matlab库简单用法讲解
2020/12/31 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
数学高效课堂实施方案
2014/03/29 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
老兵退伍标语
2014/10/07 职场文书
房屋出售授权委托书
2014/10/12 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
Go web入门Go pongo2模板引擎
2022/05/20 Golang