Detailed explanation of AngularJS form element value binding operation-JS Tutorial-php.cn

Detailed explanation of AngularJS form element value binding operation

小云云

Release： 2018-01-25 11:29:00

Original

1282 people have browsed it

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;
}

Copy after login

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}}

Copy after login

Javascript operation code:

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

Copy after login

Effect ：

Related recommendations:

in_array() in javascript finds the element value in the array

Detailed explanation of the method of implementing custom instructions and instruction configuration items in AngularJS

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!