AngularJS入门教程之ng-checked 指令详解

AngularJS ng-checked 指令

AngularJS 实例

选择一个或选择所有选项:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
 <p>My cars:</p>
 <input type="checkbox" ng-model="all"> Check all<br><br>
 <input type="checkbox" ng-checked="all">Volvo<br>
 <input type="checkbox" ng-checked="all">Ford<br>
 <input type="checkbox" ng-checked="all">Mercedes
 <p>点击 "Check all" 选择所有的车。</p>
</body>
</html>

定义和用法

ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。

如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

语法

<input type="checkbox|radio" ng-checked="expression"></input>

type 为 checkbox 或 radio 的 <input> 元素支持。

参数值

值 描述
expression 如果返回 true，将会选中元素选项。

以上就是对AngularJS ng-checked 指令 的资料整理，后续继续补充，谢谢大家的支持！

赞 (0)

相关推荐

  • 深究AngularJS——ng-checked（回写：带真实案例代码）

    1.需求 在添加页面实现一个checkbox的选择,然后在详情页面展示时,会自动选上之前被选中的. 2.添加页面 看官最好将这个代码复制过去看看效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"><

  • AngularJS 入门教程之HTML DOM实例详解

    AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bd

  • AngularJS入门教程之Select(选择框)详解

    AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://a

  • Zend Framework入门教程之Zend_Session会话操作详解

    本文实例讲述了Zend Framework入门教程之Zend_Session会话操作.分享给大家供大家参考,具体如下: 会话命名空间 实现会话 代码: <?php require_once "Zend/Session/Namespace.php"; $myNamespace = new Zend_Session_Namespace('Myspace'); if(isset($myNamespace->numberOfPageRequests)) { $myNamespace

  • Zend Framework入门教程之Zend_Registry组件用法详解

    本文实例讲述了Zend Framework中Zend_Registry组件用法.分享给大家供大家参考,具体如下: 1.对象注册表 入门案例: <?php require_once("Zend/Loader.php"); Zend_Loader::loadClass('Zend_Registry'); $member = array( "姓名"=>"张三", "性别"=>"女", "

  • Zend Framework入门教程之Zend_Config组件用法详解

    本文实例讲述了Zend Framework中Zend_Config组件用法.分享给大家供大家参考,具体如下: 1.从PHP数组中读取数据 使用Zend_Config_Ini(读取ini配置文件) Zend_Config_Xml(读取XML配置文件) 案例: <?php require_once("Zend/Loader.php"); Zend_Loader::loadClass('Zend_Config'); $array = array( 'webhost' => '12

  • Zend Framework入门教程之Zend_Db数据库操作详解

    本文实例讲述了Zend Framework中Zend_Db数据库操作方法.分享给大家供大家参考,具体如下: 引言:Zend操作数据库通过Zend_Db_Adapter 它可以连接多种数据库,可以是DB2数据库.MySQli数据库.Oracle数据库.等等. 只需要配置相应的参数就可以了. 下面通过案例来展示一下其连接数据库的过程. 连接mysql数据库 代码: <?php require_once 'Zend/Db.php'; $params = array('host'=>'127.0.0.

  • ES6入门教程之Class和Module详解

    本文主要介绍了ES6中Class和Module的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.Class ES6引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. // 定义类 class Point() { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var point = new

  • AngularJS入门教程之AngularJS指令

    熟悉HTML的朋友都知道,HTML有很多属性.比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型.AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能. AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: 常用AngularJS指令 ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng

  • AngularJS入门教程之AngularJS表达式

    表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串.数字.运算符和变量 数字运算{{1 + 5}} 字符串连接{{ 'abc' + 'bcd' }} 变量运算 {{ firstName + " " + lastName }}

  • AngularJS入门教程之Helloworld示例

    AngularJS入门教程之Helloworld示例

    本文实例讲述了AngularJS入门教程之Helloworld示例.分享给大家供大家参考,具体如下: 什么是AngularJs? angularjs是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了.这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合. AngularJS简单的Helloworld例子: <!D

随机推荐