Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des AngularJS-Formularelementwertbindungsvorgangs

Ausführliche Erläuterung des AngularJS-Formularelementwertbindungsvorgangs

小云云Original: 2018-01-25 11:29:001286Durchsuche

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

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

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!

JavaScript css html 表单验证

Stellungnahme：

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

Vorheriger Artikel：Der Bootstrap-Tooltip zeigt die Implementierungsmethoden für Zeilenumbruch und Linksausrichtung anNächster Artikel：Der Bootstrap-Tooltip zeigt die Implementierungsmethoden für Zeilenumbruch und Linksausrichtung an

In Verbindung stehende Artikel

Mehr sehen