【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】---实现select的ng-options的更多相关文章
- AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- AngularJS的select设置默认值
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...
- 关于angularjs的select下拉列表存在空白的解决办法
angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option ng-repeat></option>option中 ...
- angularjs 下select中ng-options使用
当我有一堆object数据要用下拉框进行显示选择时,可以使用到angularjs中的select中的ng-options的属性.官网网址:https://docs.angularjs.org/api/ ...
- angularjs中常用的ng指令介绍【转载】
原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...
- JS对select动态添加options操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
- AngularJS初始化Select选择框
一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...
- Angularjs实现select的下拉列表
练习使用angularjs实现一个select下拉列表: <div ng-app="selectApp" ng-controller="selectControll ...
- AngularJS:Select
ylbtech-AngularJS:Select 1.返回顶部 1. AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option ...
随机推荐
- Simple guide to Java Message Service (JMS) using ActiveMQ
JMS let’s you send messages containing for example a String, array of bytes or a serializable Java o ...
- ios 移动应用通用逻辑流程
请先看前一篇文章<移动互联网app业务逻辑图>,以便于理解 http://blog.csdn.net/uxyheaven/article/details/14156659 1 start ...
- DataGridView 添加ComboBox
http://www.wapsolo.com/Personal/personal_view_75.aspx DataGridView 添加ComboBox 第一: 先在窗体设计时拖一个ComBoBox ...
- linux之unlink函数解析
[lingyun@localhost unlink]$ cat unlink.c /********************************************************* ...
- cocos2d-x 读取.plist文件
转自:http://blog.csdn.net/hgplan/article/details/8629904 在cocos2d-x中可以用.plist格式的文件来保存数据,它是XML文件格式的一种,在 ...
- 【转】Android真机抓屏- Android Screen Monitor
http://www.cnblogs.com/xiaofeixiang/p/4086092.html 一般运行Android应用程序有两种方式一种是设置Android虚拟设备模拟器,通过Android ...
- SRV记录说明
SRV记录是DNS服务器的数据库中支持的一种资源记录的类型,它记录了哪台计算机提供了哪个服务这么一个简单的信息 SRV 记录:一般是为Microsoft的活动目录设置时的应用.DNS可以独立于活动 ...
- Swift学习笔记七
控制流 Swift提供了和C类似的控制流表达式,包括for.while.if.switch.当然也包括break和continue这种语句来引导控制流到某个指定点的语句. 在C的for基础上,Swif ...
- AttributeBehavior
当事件触发的时候... 会循环所有behavior的events 为ower添加事件.....AttributeBehavior 为事件添加如下方法 public function evaluat ...
- NGUI panel使用soft clip时,屏幕缩放后无法正常工作的问题解决
最近开始使用NGUI,通过查找,搞定了屏幕缩放问题,但在用到panel的soft clip时,碰到了问题,NGUI给出了警告 “clipped panels must have a uniform s ...