Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de l'opération de liaison de valeur d'élément de formulaire AngularJS

小云云
Libérer: 2018-01-25 11:29:00
original
1311 Les gens l'ont consulté

Cet article présente principalement l'implémentation AngularJS des opérations de liaison de valeurs d'éléments de formulaire et analyse les techniques d'exploitation liées à AngularJS pour les attributs d'éléments de formulaire sur la base d'exemples spécifiques. Les amis qui en ont besoin peuvent s'y référer.

ng-disabled : lier l'attribut désactivé du contrôle
ng-show : afficher ou masquer les éléments : ms-visible
ng-hide : exactement la fonction opposée de ng-show

Contenu CSS :


p.d1{
 width: 20px;
 height: 20px;
 background-color: pink;
}
p.d2{
  width: 20px;
 height: 20px;
 background-color: black;
}
Copier après la connexion

Texte HTML :


<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}}
Copier après la connexion

Code d'opération Javascript :


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;
  };
});
Copier après la connexion

Effet :

Recommandations associées :

in_array() en javascript pour trouver les valeurs des éléments dans un tableau

AngularJS personnalisation de l'implémentation Explication détaillée des instructions et des éléments de configuration des instructions

Méthode d'implémentation de la fonction de validation de formulaire AngularJS


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal