angular学习笔记(四)- input元素的ng-model属性

input元素的ng-model属性:

用于将input的值和变量的值进行双向绑定

<!DOCTYPE html>
<html ng-app>
<head><title>2.3.1input数据绑定</title><meta charset="utf-8"><script src="../angular.js"></script><script src="script.js"></script>
</head>
<body><div ng-controller = 'CheckStatus'><form action=""><input type="checkbox" ng-model="checkRabbit"/>rabbit:<span>{{checkRabbit}}</span><br><input type="checkbox" ng-model="checkDog"/>dog:<span>{{checkDog}}</span><br><input type="checkbox" ng-model="checkCat"/>cat:<span>{{checkCat}}</span></form></div>
</body>
</html>

如果是text类型的input,绑定的就是它的value,如果是checkbox,绑定的就是选中状态的true或者false,

对input的绑定是双向的,即变量的变化,也会引起选中与否的变化(或者是value的变化),比如这里设置的checkRabbit值是true,那么它就是选中的,其余两个值设置的是false,他们就是不选中的,

同样,改变input的选中状态(或者是value值),它们绑定的变量也会被改变

angular学习笔记(四)- input元素的ng-model属性相关推荐

HTML5（李炎恢）学习笔记四 ------------- HTML5元素（中）
一.表格元素 HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数 1.表格元素总汇表格的基本构成最少需要三个元素:<table>.<tr>.<td> ...
Angular学习笔记四之依赖注入与服务
一.依赖注入 (一)依赖注入理解先来看一段代码: class Engine {// Engine类的构造函数,需要接受一个number类型的参数constructor(speed: number) ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
Ethernet/IP 学习笔记四
Ethernet/IP 学习笔记四 EtherNet/IP Quick Start for Vendors Handbook (PUB213R0): https://www.odva.org/Port ...
OpenCV学习笔记四-image的一些整体操作
title: OpenCV学习笔记四-image的一些整体操作 categories: 编程 date: 2019-08-08 12:50:47 tags: OpenCV image的一些操作 sP4 ...
吴恩达《机器学习》学习笔记四——单变量线性回归（梯度下降法）代码
吴恩达<机器学习>学习笔记四--单变量线性回归(梯度下降法)代码一.问题介绍二.解决过程及代码讲解三.函数解释 1. pandas.read_csv()函数 2. DataFrame ...
STM32F103学习笔记四时钟系统
STM32F103学习笔记四时钟系统本文简述了自己学习时钟系统的一些框架,参照风水月 1. 单片机中时钟系统的理解 1.1 概述时钟是单片机的脉搏,是单片机的驱动源用任何一个外设都必须打开相应 ...
华清远见fs4412开发板学习笔记(四)
fs4412开发板学习笔记(四) 今天的课程安排 1.复习 1.1 VIM 编辑器 [1] vim + filename 打开 [2] 工作模式命令模式编辑模式底行模式 [3] 模式切换命令- ...
MySQL高级学习笔记(四)
文章目录 MySQL高级学习笔记(四) 1. MySql中常用工具 1.1 mysql 1.1.1 连接选项 1.1.2 执行选项 1.2 mysqladmin 1.3 mysqlbinlog 1.4 ...

angular学习笔记(四)- input元素的ng-model属性

angular学习笔记(四)- input元素的ng-model属性相关推荐

最新文章

热门文章