Home > Article > Web Front-end > Detailed explanation of AngularJS form element value binding operation
This article mainly introduces the AngularJS implementation of form element value binding operations, and analyzes AngularJS related operating techniques for form element attributes based on specific examples. Friends in need can refer to it. I hope it can help everyone.
ng-disabled: Bind the disabled attribute of the control ng-show: Show or hide elements: ms-visible ng -hide: The exact opposite function of ng-show
css content:
p.d1{
width: 20px;
height: 20px;
background-color: pink;
}
p.d2{
width: 20px;
height: 20px;
background-color: black;
}HTML text :
<body ng-app="myApp" ng-controller="myctr">
<p>
请输入：<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切换输入：<input type="button" value="switch input" ng-click="switchInput();">
</p>
<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>
<p class="d1" ng-show="flag"></p>
<p>ng-hide:checkValue</p>
<p class="d2" ng-hide="checkValue"></p>
<hr>
<!-- ng-click：后面可以直接跟表达式，表达式会直接执行，变量不支持++操作 -->
<input type="button" ng-click="count = count + 1" value="加1">：{{count}}Javascript operation code:
var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
$scope.flag=false;
$scope.count=0;
$scope.switchInput=function(){
$scope.flag=!$scope.flag;
};
});Effect ：
Related recommendations:
in_array() in javascript finds the element value in the array
AngularJS form verification function implementation method
The above is the detailed content of Detailed explanation of AngularJS form element value binding operation. For more information, please follow other related articles on the PHP Chinese website!