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】---实现select的ng-options的更多相关文章

  1. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  2. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  3. AngularJS的select设置默认值

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...

  4. 关于angularjs的select下拉列表存在空白的解决办法

    angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option  ng-repeat></option>option中 ...

  5. angularjs 下select中ng-options使用

    当我有一堆object数据要用下拉框进行显示选择时,可以使用到angularjs中的select中的ng-options的属性.官网网址:https://docs.angularjs.org/api/ ...

  6. angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...

  7. JS对select动态添加options操作(主流浏览器兼容)

    之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...

  8. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  9. Angularjs实现select的下拉列表

    练习使用angularjs实现一个select下拉列表: <div ng-app="selectApp" ng-controller="selectControll ...

  10. AngularJS:Select

    ylbtech-AngularJS:Select 1.返回顶部 1. AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option ...

随机推荐

  1. 内存映射文件详解-----C++实现

    先不说内存映射文件是什么.贴个代码先,. #include <iostream> #include <fcntl.h> #include <io.h> #inclu ...

  2. ABA problem

    多线程及多进程编程同步时可能出现的问题,如果一个值被P1读取两次,两次的值相同,据此判断该值没有被修改过,但该值可能在两次读取之间被P2修改为另外一个value,并在P1再次读取之前修改回了原值.P1 ...

  3. map的正确删除方式

    遍历删除map元素的正确方式是 for(itor = maptemplate.begin; itor != maptemplate.end(); ) {      if(neederase)     ...

  4. 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频

    - Scott Hanselman的中文博客[转载] [原文发表地址] Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Trai ...

  5. cocos2d-x的初步学习二十一之iosandroid跨平台环境配置

    这篇文章中,我们将来构建下跨平台开发的环境配置,我自己也是参考了别人了文章,折腾了几个小时,尤其是android的配置相对麻烦些.... 参考自子龙山人:http://www.cnblogs.com/ ...

  6. ADO.NET 快速入门(十三):使用 OLE DB 检索数据

    OleDbDataReader 类提供了一种从数据源读取数据记录只进流的方法.如果想使用 SQL Server 7.0 或者更高版本,请参考文章:使用 SQL Server 检索数据.   OleDb ...

  7. Codeforces Gym 100338B Geometry Problem 计算几何

    Problem B. Geometry ProblemTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudg ...

  8. Android源码编译的全过程记录

    写本篇文章主要参考了官方文档和网上的一些资料,但是对于Android最新的代码来说,网上资料有些已经过时.本文中步骤已经作者实验,大家可以亲自执行试试.由于没有使用Eclipse的习惯,所以没有做Ec ...

  9. java中接口的定义与实现

    1.定义接口     使用interface来定义一个接口.接口定义同类的定义类似,也是分为接口的声明和接口体,当中接口体由常量定义和方法定义两部分组成.定义接口的基本格式例如以下: [修饰符] in ...

  10. 数据恢复软件使用经验-支持U盘,手机SD卡,硬盘数据,解决图片恢复后打不开的问题

    数据恢复软件使用经验-支持U盘,手机SD卡,硬盘数据.解决图片恢复后打不开的问题. 用过非常多数据恢复软件.最早EasyRecovery pro.恢复过U盘.手机SD卡,硬盘数据.但如今下载不了最新版 ...