学习angularjs的ng-hide和ng-disabled

一,页面上有一个checkbox和一个文本框。切换checkbox能对文本框输入文本与否:

<input type="checkbox" ng-model="ckSwitch"  />
        <input id="Text1" type="text" ng-disabled="!ckSwitch" ng-model="textValue" />

Html Code

演示:

二,现想把文本框一开是隐藏时,当点击checkbox为真时,文本框才显示:

<input type="checkbox" ng-model="ck1" />
            <input type="text" ng-hide="!ck1" ng-model="text1" />

Html Code

演示:

时间: 2024-08-25 09:05:23

学习angularjs的ng-hide和ng-disabled的相关文章

Part 14 ng hide and ng show in AngularJS

ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us understand this with an example When Hide Salary checkbox is checked, the Salary column should be hidden. When it is unchecked the Salary column should be

【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)

[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的 是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入.等等. 参考资料: angularjs中文网:http://www.apjs.net/ angularjs官网:http://angula

AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <opti

AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR? XHR是XMLHttpRequest的简称,XMLHttpRequest 用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下,对网页的某部分进行更新.简单说,浏览器中URL

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

1.下载angularjs 进入其官网下载:https://angularjs.org/?,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js 所有版本:https://code.angularjs.org/ 2.示例1 HelloWorld ! 新建一个helloworld.html <!doctype html> <html ng-app> <head> &

学习Angularjs向数据库添加数据

今天学习angularjs向数据库添加数据. 学习此篇,得从以往几篇开始,因为那还有创建数据表等演示. 现在来创建一个添加的存储过程: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE PROCEDURE [dbo].[usp_Goods_Insert] ( @Item NVARCHAR(55), @Description NVARCHAR(20), @Qty DECIMAL(10,2) ) AS IF EXISTS(SELECT T

7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识.学习 AngularJS也一样.现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面. 让我们度下面7本书探究 AngularJS 吧--有的综合性强,有的很有趣,所有的书籍都有很高的可读性,而且,如果你在线阅读的话,一分钱都不用花. 1. AngularJS In 60 Minutes 作者: Dan Wahlin 在线阅读:http://fastandfluid.com/publicdownloads/AngularJSIn6

AngularJS学习--- AngularJS中模板链接和图像 ng-src step6

接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step-6 npm start 1.效果 相较于前一篇文章,明显感觉多了图片,那么这些图片是怎么加载进去的呢?这里图片各不一样,如果用传统的方式去加载图片可能要写很多代码,这里看一下angularjs是如何实现的?? 2.实现代码 app/index.html <ul class="phones"> <li ng-repeat="

学习 AngularJs 终于有点进步了。

很庆幸,自己在7月股市最低点的时候上车了,,开始了在股市的第一票,现在还不知道会不会赚,虽然买的核电有点偏高,但是还是对国家大工业大工程有信心的,按照今天的走势应该赚不少,希望是吧. 这几天股市都在慢牛,希望一直维持,自己买的票票终于开始盈利了,继续捂着,希望继续保持这种慢牛的趋势 能上5000点,赚个一倍两倍的再出来,我觉得理财还是买股票好,买基金不是一个好的选择,基金反应太慢,股票比较直接吧 个人觉得.股票才是一个人真正开始了解金融的开始. 7月份的股市 就像这句话: 大雨过后,有两种人,一