Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung des AngularJS-Formularelementwertbindungsvorgangs

小云云
Freigeben: 2018-01-25 11:29:00
Original
1311 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die AngularJS-Implementierung von Formularelementwertbindungsoperationen vor und analysiert AngularJS-bezogene Betriebstechniken für Formularelementattribute anhand spezifischer Beispiele. Ich hoffe, dass er allen helfen kann.

ng-disabled: Binden Sie das deaktivierte Attribut des Steuerelements
ng-show: Elemente anzeigen oder ausblenden: ms-visible
ng-hide: Die Funktion von ng-show ist genau das Gegenteil

CSS-Inhalt:


p.d1{
 width: 20px;
 height: 20px;
 background-color: pink;
}
p.d2{
  width: 20px;
 height: 20px;
 background-color: black;
}
Nach dem Login kopieren

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}}
Nach dem Login kopieren

Javascript-Operationscode:


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;
  };
});
Nach dem Login kopieren

Wirkung:

Verwandte Empfehlungen:

in_array() in Javascript, um Elementwerte in einem Array zu finden

AngularJS-Implementierungsanpassung Detaillierte Erläuterung der Anweisungen und Befehlskonfigurationselemente

Implementierungsmethode für die AngularJS-Formularvalidierungsfunktion


Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des AngularJS-Formularelementwertbindungsvorgangs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage