Maison > Article > interface Web > Explication détaillée de l'opération de liaison de valeur d'élément de formulaire AngularJS

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

小云云original: 2018-01-25 11:29:001298parcourir

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

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

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

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!

JavaScript css html 表单验证

Déclaration：

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

Article précédent：L'info-bulle Bootstrap montre comment implémenter le retour à la ligne et l'alignement à gaucheArticle suivant：L'info-bulle Bootstrap montre comment implémenter le retour à la ligne et l'alignement à gauche

Articles Liés

Voir plus