Angulajs 表单的ng-model绑定
1、对于文本框,只需设置 ng-model 属性就可以实现双向绑定,如:
<input type="text" class="form-control" ng-model="item">
这样在js中就可以通过 $scope.item来实现双向绑定。
2、单选按钮组的绑定方式,如:
<label> <input type="radio" name="optionsRadios" value="single" ng-model="seltype" >单选题</label>
<label> <input type="radio" name="optionsRadios" value="muti" ng-model="seltype">多选题</label>
在js中的代码:
1)初始化设置被选中的按钮: $scope.seltype = "muti" 这样初始时第2个radio就会被选中
2)获取被选中的按钮
如果 $scope.seltype 的值为 single ,则是第1个radio被选中。
如果 $scope.seltype 的值为 muti,则是第2个radio被选中。
3、复选框checkbox的绑定方式
<input type="checkbox" ng-model="selok">选中
在js中的代码
1)初始化选中:$scope.selok = true;
2)判断checkbox是否被选中:
如果 $scope.selok 返回true,则被选中;否则没有被选中
Angulajs 表单的ng-model绑定的更多相关文章
- spring+thymeleaf实现表单验证数据双向绑定
前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
- python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- 避免layui form表单重复触发submit绑定事件
个人博客 地址:http://www.wenhaofan.com/article/20180927002336 在使用以下代码监听lay-filter为editConfig的提交按钮后,当点击提交按钮 ...
- knockoutJS学习笔记08:表单域绑定
前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- html表单-双向绑定
潜水多年.一直是只看不评不写多年,每每看到各位大牛分享的经典文章都是默默的收藏,对大牛技术分享技术表示感谢,这么多年从博客园学到了很多. 这段时间项目告一段落. 正好这段时间相对清闲,我也整理一些常用 ...
- antd 表单双向绑定的研究
痛点 在使用antd的表单时,大家觉得不够清爽,总结如下: 大量的模板语法,需要一定的学习成本. 需要手动地进行数据绑定,使用大量的onChange/setFieldsValue去控制数据. 无法通过 ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- 走进AngularJs(九)表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
随机推荐
- java中两个对象间的属性值复制,比较,转为map方法实现
package com.franson.study.util; import java.lang.reflect.InvocationTargetException; import java.lang ...
- android上传位置信息导致的流量大爆炸问题调查
原由:项目中有人写了个位置上传的服务,其实一直没问题,后来不知道什么时候出现了很多抱怨,是开着app流量一下子跑掉了几个G,差点就要卖房子还移动话费了,很多同事哭笑不得的找上门来,后来PM解决了,我一 ...
- ubuntu14.04+xfce下启用fcitx,使用中文输入法
1. 安装fcitx sudo apt-get install fcitx-pinyin 2.启用fcitx 打开 setting -> Language Support -> Lang ...
- JavaEE学习之设计模式
转自:http://mp.weixin.qq.com/s?__biz=MjM5OTMxMzA4NQ==&mid=221913387&idx=2&sn=d5d006300722f ...
- 在JSTL EL中处理java.util.Map,及嵌套List的情况
关联的键查找存储在映射中的值. 在方括号中指定键,并将相应的值作为表达式的值返回.例如,表达式 ${map['key']} 返回与 map标识符所引用的 Map 中的 "key" ...
- [LeetCode]题解(python):144-Binary Tree Preorder Traversal
题目来源: https://leetcode.com/problems/binary-tree-preorder-traversal/ 题意分析: 前序遍历一棵树,递归的方法很简单.那么非递归的方法呢 ...
- python进阶3--文件系统
文件系统 python的标准库中包括大量工具,可以处理文件系统中的文件,构造和解析文件名,也可以检查文件内容. pyhton表文件名表示为简单的字符串,另外还提供了一些工具,用来由os.path中平台 ...
- MySQL 表分区A
在MySQL中表的分区类型总的来说有四种: 第一种:range分区.基于一个给定的区间范围,把数据分配到不同的分区. 第二种:list 分区.基本枚举的值列表进行分区. 第三种:hast 分区.基 ...
- 应用AXIS开始Web服务之旅(soap web services)——使用三种不同的语言访问创建的Web服务,分别是JAVA、VB、VC
一. 介绍 本文并不是想介绍Web服务的原理.系统架构等,我们假设您已经了解了关于Web服务的一些基本的概念.原理等知识.本文主要是针对那些已经了解Web服务概念,但是还没有亲身体会Web服务所带来令 ...
- kafka初探
http://www.infoq.com/cn/articles/kafka-analysis-part-1