AngularJS实现表单元素值绑定操作示例

2024-10-04 10:53:02

本文实例讲述了AngularJS实现表单元素值绑定操作。分享给大家供大家参考，具体如下：

ng-disabled:绑定控件的disabled属性
ng-show:显示或者隐藏元素：ms-visible
ng-hide:和ng-show的功能恰好相反

css内容：

div.d1{
 width: 20px;
 height: 20px;
 background-color: pink;
}
div.d2{
  width: 20px;
 height: 20px;
 background-color: black;
}

HTML正文：

<body ng-app="myApp" ng-controller="myctr">
<div>
请输入：<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切换输入：<input type="button" value="switch input" ng-click="switchInput();">
</div>
<hr ng-init="checkValue=false">
input:<input type="text" ng-disabled="checkValue">{{checkValue}}<br>
<input type="checkbox" ng-model="checkValue">stop input <!-- 注意ng-model不能作用于单选框 -->
<hr>
<p>ng-show:flag</p>
<div class="d1" ng-show="flag"></div>
<p>ng-hide:checkValue</p>
<div class="d2" ng-hide="checkValue"></div>
<hr>
<!-- ng-click：后面可以直接跟表达式，表达式会直接执行，变量不支持++操作 -->
<input type="button" ng-click="count = count + 1" value="加1">：{{count}}

Javascript操作代码：

var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
  $scope.flag=false;
  $scope.count=0;
  $scope.switchInput=function(){
    $scope.flag=!$scope.flag;
  };
});

效果：

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

详细分析使用AngularJS编程中提交表单的方式

在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理
AngularJS表单编辑提交功能实例

研究了下高大上的AngularJS决定试试它的表单编辑提交功能,据说比JQuery强的不是一星半点. 好奇呀,试试吧.....搞了好久,尼玛...靠..靠..靠..尼玛 ..靠..靠....好吧,谁让我手欠呢. 搜索到了很多关于AngularJS Form的案例如: http://www.angularjs.cn/A08j https://github.com/tiw/angularjs-tutorial https://github.com/tiw/angularjs-tutorial/bl
angularjs $http实现form表单提交示例

需求:请求第三方后台接口返回一段html字符串如下,由前端去实现form表单的POST提交, 说明:form表单submit()实现自动提交input标签hidden,注意script代码中的document.redirect.submit(); <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head
详解AngularJS实现表单验证

开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码代码如下: <<input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码代码如下: <<input type="tex
AngularJS中实现用户访问的身份认证和表单验证功能

身份验证权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们
AngularJS使用ngMessages进行表单验证

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="
AngularJS手动表单验证

所谓手动验证是通过AngularJS表单的属性来验证,而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm", 如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"> <head> <meta charset="
AngularJS实现表单验证

虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始复制代码代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&
AngularJS的表单使用详解

AngularJS提供丰富填写表单和验证.我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式.使用novalidate表单声明禁止任何浏览器特定的验证.表单控件使用了大量的角活动.让我们快速浏览一下有关事件先. 事件 AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ng-
AngularJS自动表单验证

AngularJS的另外一种表单验证方式是自动验证,即通过directive来实现,除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module. 有关angular-auto-validate: 安装:npm i angular-auto-validate 引用:<script src="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js&qu
AngularJS使用指令增强标准表单元素功能

Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括: 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE>  <html ng-app="exampleApp"> <head> <title>Angular Directive</ti

AngularJS实现表单元素值绑定操作示例

相关推荐

随机推荐