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脚本 Node.js 使用入门
Mar 07 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
js保留两位小数方法总结
Jan 31 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
vue+django实现下载文件的示例
Mar 24 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP基础知识回顾
2012/08/16 PHP
简单的php文件上传(实例)
2013/10/27 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
js计数器代码
2006/11/04 Javascript
常用的javascript function代码
2008/05/23 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
毕业生找工作推荐信
2013/11/21 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
个人优缺点总结
2015/02/28 职场文书
办公室卫生管理制度
2015/08/04 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
python实现自定义日志的具体方法
2021/05/28 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
MySQL创建管理LIST分区
2022/04/13 MySQL
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS