凡客建站_怎么建设网站_建网_企业网站怎么建立_网站建设官网
当前位置:建站首页 > 新闻资讯 > 最新签约 >

手机微信微信小程序_AngularJS完成表单元素值绑定

发表日期:2021-01-11 13:50文章编辑:jianzhan浏览次数: 标签:    

AngularJS实现表单元素值绑定操作示例       这篇文章主要介绍了AngularJS实现表单元素值绑定操作,结合具体实例形式分析了AngularJS针对表单元素属性相关操作技巧,需要的朋友可以参考下

本文实例讲述了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不能作用于单选框 -- 
 p ng-show:flag /p 
 div ng-show="flag" /div 
 p ng-hide:checkValue /p 
 div ng-hide="checkValue" /div 
 !-- 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程序设计有所帮助。


返回列表
相关新闻

普遍疑惑:手机微信微信小程序显示信息登陆不

普遍疑惑:手机微信微信小程序显示信息登陆不成功提醒怎样处理?处理方法:先明确微信小...

日期:2020-08-07 浏览次数:58