【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 ...
随机推荐
- C语言经典算法100例(一)
C语言中有有许多经典的算法,这些算法都是许多人的智慧结晶,也是编程中常用的算法,这里面包含了众多算法思想,掌握这些算法,对于学习更高级的.更难的算法都会有很大的帮助,会为自己的算法学习打下坚实的基础. ...
- Ecshop 学习之路一 2016年6月30日
以前下载ecshop 都是在ecshop官网上下载,前后台模板都很难看.功能也不太齐全,这次在模板堂下载了ecshop 模板 仿小米的.做一个简单的电商网站. 页面结构还是挺简单的.功能也齐全.用ec ...
- Linux 下监控用户最大进程数参数(nproc)是否到达上限
Linux 下监控用户最大进程数参数(nproc)是否到达上限的步骤: 1.查看各系统用户的进程(LWP)数: 注意:默认情况下采用 ps 命令并不能显示出所有的进程.因为 Linux 环境下执行多线 ...
- ckeditor内容保存后显示问题
ckeditor保存到数据库中的数据是html格式,如果要在前台进行显示,需要采用${news.content },这样数据才能进行正常的显示,否则如果采用<s:property value=& ...
- 怎么修改电脑MAC地址 电脑MAC地址修改图文教程
本文转载:http://www.45fan.com/a/Router/2677.html MAC地址是指电脑网卡的硬件地址,此地址一般烧录在网卡上.MAC地址工作在OSI七层模型的第二层,即数据链接层 ...
- MEF 编程指南(四):声明导入
组合部件通过 [System.ComponentModel.Composition.ImportAttribute] 特性声明导入.类似于导出,也有几种不同的方法声明导入,即通过:字段(Fields) ...
- PostgreSQL的 initdb 源代码分析之十
继续分析, 如下这段,因为条件不成立,被跳过: /* Create transaction log symlink, if required */ ) { fprintf(stderr,"I ...
- 让table 居于页面的正中间(上下左右均居中的方法)
? <table bgcolor="#jnkc" width="300" height="200" style="posit ...
- HDU 5510 Bazinga 暴力匹配加剪枝
Bazinga Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5510 ...
- delphi 自动滚动到最底端scroll
自动滚动到最底端scrollUses MSHTML;{$R *.dfm}var ScrollPos: integer=0;procedure TForm1.Button1Click(Sender: ...