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 性能优化手册 推荐
Feb 23 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
vue实现扫码功能
Jan 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
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python3.7.0的安装步骤
2018/08/27 Python
个人简历自我鉴定
2013/10/11 职场文书
七一党建活动方案
2014/01/28 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
小摄影师教学反思
2014/04/27 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
大学生学期个人总结
2015/02/12 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS