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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 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自定义函数返回多个值
2006/11/26 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python中字符串类型json操作的注意事项
2017/05/02 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python坐标线性插值应用实现
2019/11/13 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
几个常见的软件测试问题
2016/09/07 面试题
化学教师教学反思
2014/01/17 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
返乡农民工证明
2015/06/24 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python