ربط بيانات AngularJS
ربط البيانات في AngularJS هو التزامن بين النموذج والعرض.
نموذج البيانات
عادةً ما تحتوي تطبيقات AngularJS على نموذج بيانات. نموذج البيانات عبارة عن مجموعة من البيانات المتاحة للتطبيق.
مثال
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
عرض HTML
تسمى حاوية HTML حيث يتم عرض تطبيق AngularJS بالعرض.
يمكن للعرض الوصول إلى النموذج ، وهناك عدة طرق لعرض بيانات النموذج في طريقة العرض.
يمكنك استخدام ng-bindالتوجيه ، الذي سيربط HTML الداخلي للعنصر بخاصية النموذج المحددة:
مثال
<p ng-bind="firstname"></p>
يمكنك أيضًا استخدام الأقواس المزدوجة لعرض محتوى من النموذج:{{ }}
مثال
<p>First name: {{firstname}}</p>
أو يمكنك استخدام ng-modelالتوجيه الموجود في عناصر تحكم HTML لربط النموذج بالعرض.
ng-modelالتوجيه _
استخدم ng-modelالتوجيه لربط البيانات من النموذج إلى طريقة العرض في عناصر تحكم HTML (الإدخال ، التحديد ، منطقة النص)
مثال
<input ng-model="firstname">
يوفر ng-modelالتوجيه ارتباطًا ثنائي الاتجاه بين النموذج والعرض.
اتجاهين ملزم
ربط البيانات في AngularJS هو التزامن بين النموذج والعرض.
عندما تتغير البيانات في النموذج ، يعكس العرض التغيير ، وعندما تتغير البيانات في العرض ، يتم تحديث النموذج أيضًا. يحدث هذا على الفور وبشكل تلقائي ، مما يضمن تحديث النموذج والعرض في جميع الأوقات.
مثال
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
تحكم AngularJS
يتم التحكم في التطبيقات في AngularJS بواسطة وحدات تحكم. اقرأ عن وحدات التحكم في فصل AngularJS Controllers .
بسبب المزامنة الفورية للنموذج والعرض ، يمكن فصل وحدة التحكم تمامًا عن العرض ، والتركيز ببساطة على بيانات النموذج. بفضل ربط البيانات في AngularJS ، سيعكس العرض أي تغييرات تم إجراؤها في وحدة التحكم.
مثال
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>