【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 ...
随机推荐
- win8图片默认不显示
最近,发现了一个问题,在查看图片的时候,出现了这样的情况: 查看的时候很不方便,想要找到自己需要的图片就要误打误撞,也不知道自己在哪儿设置了,于是,上网查资料,才发现其实只需要简单的该一下设置就可以了 ...
- 位运算&字节运算
- Elasticsearch简单介绍
如何对站内的数据进行检索? ElasticSearch是比较著名的一个分布式检索解决方案.传统的数据库例如mysql,oracle等,对一个关键词进行检索通常都是采用like的匹配,对性能或者数据量的 ...
- LVM 创建分区扩展分区记录
LVM 原理 图片来自百度百科 测试环境centOS 7 LVM version: 2.02.115(2)-RHEL7 (2015-01-28) ...
- 得到内网域管理员的5种常见方法<转>
1.Netbios and LLMNR Name Poisoning 这个方法在WIN工作组下渗透很有用,WIN的请求查询顺序是下面三个步骤:本地hosts文件(%windir%\System32\d ...
- [Javascript] Manipulate the DOM with the classList API
Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than u ...
- Scrapy 对不同的Item进行分开存储
在Piperlines里面进行对象的判断, def process_item(self, item, spider): if item.__class__ == BaseItem : #savexxx ...
- js 控制div 显示隐藏的问题
var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...
- UNIX标准化及实现之POSIX标准扩展头文件
POSIX标准定义的XSI(X/Open System Interface)扩展头文件 头文件 说明 <cpio.h> cpio归档值 <dlfcn.h> 动态链接 <f ...
- 实用JS大全
****************************************************************(一)常用元素,对象,事件,技巧 事件源对象 event.srcElem ...