AngularJS – Unterschied zwischen ng-model und ng-bind

Die Datenbindung ist die am häufigsten nachgefragte Funktion in AngularJS. Es gibt zwei Richtlinien ng-model und ng-bind werden häufig zur Datenbindung verwendet. Für Programmierer ist es oft verwirrend, zwischen diesen beiden Anweisungen zu unterscheiden. Offensichtlich haben beide unterschiedliche Vorteile und werden insgesamt für unterschiedliche Zwecke verwendet. In diesem Tutorial erfahren Sie besser, wann Sie diese beiden Datenbindungsanweisungen verwenden sollten AngularJS.

Wenn Sie Fragen dazu haben AngularJS Konzepte, schreiben Sie es bitte in den Kommentarbereich oder posten Sie es auf unserer Facebook-Seite.

lesen Sie auch:

  • Spring MVC + AngularJS
  • Fundamentrahmen
  • Bootstrap vs. Foundation

ng-Modell

ng-Modell oder Daten-NG-Modell Die Direktive in AngularJS ist eine der größten Stärken, um die in der Anwendung verwendeten Variablen mit Eingabekomponenten zu verbinden. Dies funktioniert als bidirektionale Datenbindung. Wenn Sie die bidirektionalen Bindungen besser verstehen möchten, verfügen Sie über eine Eingabekomponente und der in diesem Feld aktualisierte Wert muss in einem anderen Teil der Anwendung widergespiegelt werden. Die bessere Lösung besteht darin, eine Variable an dieses Feld zu binden und diese Variable überall dort auszugeben, wo Sie den aktualisierten Wert in der Anwendung anzeigen möchten.

Aber was ist, wenn die Bindung bidirektional sein muss? Wenn Sie eine Aktualisierung des Felds vornehmen, sollte sich dies in der Variablen widerspiegeln, und wenn es eine Änderung in der Variablen gibt, sollte dies im Feld widergespiegelt werden. Dies wird erreicht durch ng-Modell Richtlinie. Wenn Sie mit den meisten JavaScript-Frameworks gearbeitet haben, unterstützen alle nur Einwegbindungen.

Sehen Sie sich ein einfaches Beispiel an, das zeigt, wie bidirektionale Bindungen in AngularJS funktionieren:

<script>
	//Creating Angular Module
	var helloApp = angular.module('helloApp', []);

	//Creating Controller with Data
	helloApp.controller('employeesCtrl', function($scope) {
	$scope.search="Enter Search Criteria";
});
</script>
<body>
<!-- Creating input component and attaching to ng-model -->
Search : <input type="text" ng-model="search"><br><br>
<b>Search Term:</b>{{search}}
</body>

Im obigen Beispiel ist die Variable „Suche“ an die Eingabekomponente gebunden. Wenn ihr zum ersten Mal mit „$scope.search“ ein Wert zugewiesen wird, wird der Wert von der Variablen an die Eingabekomponente übergeben. Wenn der Benutzer später den Wert im Feld aktualisiert, gibt der Ausdruck {{search}} den Wert von der Eingabekomponente in die Variable aus. Ist es jetzt sinnvoll, wie die bidirektionale Bindung in AngularJS funktioniert? Wenn Sie irgendwelche Gedanken haben, schreiben Sie diese bitte in den Kommentarbereich. Wenn Sie weitere Erklärungen zu Zwei-Wege-Bindungen suchen, lesen Sie bitte Dieser Artikel.

ng-bind

ng-bind funktioniert ganz anders als ng-Modell. ng-bind ist eine Einweg-Datenbindung, die zum Anzeigen des Werts innerhalb einer HTML-Komponente als inneres HTML verwendet wird. Diese Direktive kann nicht zum Binden mit der Variablen, sondern nur mit dem Inhalt der HTML-Elemente verwendet werden. Tatsächlich kann dies zusammen mit ng-model verwendet werden, um die Komponente an HTML-Elemente zu binden. Diese Direktive ist sehr nützlich, um Blöcke wie div, span usw. mit innerem HTML-Inhalt zu aktualisieren.

Schauen wir uns das vollständige Beispiel an.

 <!DOCTYPE html>
<html ng-app="helloApp" ng-controller="employeesCtrl">
<head>
<title>AngularJS - ng-model vs ng-bind</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
	//Creating Angular Module
	var helloApp = angular.module('helloApp', []);

	//Creating Controller with Data
	helloApp.controller('employeesCtrl', function($scope) {
	$scope.search="Enter Search Criteria";
});
</script>
</head>
<body>
<!-- Creating input component and attaching to ng-model -->
Search : <input type="text" ng-model="search"><br><br>
Search ng-bind: <input type="text" ng-model="searchBind"><br><br>
<b>Search Term:</b>{{search}}<br><br>
<!--Mapping input component-->
<span ng-bind="searchBind"></span>
<!--Mapping directly to variable-->
<span ng-bind="search"></span>

</body>
</html>

Beispieldemo

Probieren Sie die Demo von ng-model vs. ng-bind aus

ng-Modell vs. ng-Bind

ng-mode vs. ng-bind 1

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen