Home > Article > Web Front-end > Detailed explanation of AngularJS form element value binding operation

Detailed explanation of AngularJS form element value binding operation

小云云Original: 2018-01-25 11:29:001254browse

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(&#39;myApp&#39;, []);
app.controller(&#39;myctr&#39;, 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

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!

JavaScript css html 表单验证

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Bootstrap Tooltip displays line wrapping and left alignment implementation methodsNext article：Bootstrap Tooltip displays line wrapping and left alignment implementation methods

See more

Detailed explanation of AngularJS form element value binding operation

Related articles