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中eval函数的使用方法与示例
Apr 09 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
javascript中clone对象详解
Dec 03 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
Vue指令指令大全
2019/02/09 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
使用Python写个小监控
2016/01/27 Python
Python如何实现文本转语音
2016/08/08 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python 制作简单的音乐播放器
2020/11/25 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
用python批量下载apk
2020/12/29 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
分公司经理岗位职责
2013/11/11 职场文书
小学毕业家长寄语
2014/01/19 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
业务内勤岗位职责
2015/04/13 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技