ربط البيانات AngularJS

الزامن البياناتي في AngularJS هو التزامن بين النموذج والعرض.

نموذج البيانات

عادة ما يكون لدى تطبيق AngularJS نموذج بيانات. نموذج البيانات هو مجموعة من البيانات التي يمكن استخدامها في التطبيق.

مثال

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

عرض HTML

يُسمى صندوق HTML للتطبيق في AngularJS بالعرض.

يمكن للعرض الوصول إلى النموذج، ويوجد عدة طرق لعرض بيانات النموذج في العرض.

يمكنك استخدام ng-bind تعليمات النصوص، والتي سترتبط innerHTML للعنصر بالملامح المحددة من النموذج:

مثال

<p ng-bind="firstname"></p>

جرب بنفسك

يمكنك أيضًا استخدام {{ }} لعرض محتويات النموذج:

مثال

<p>الاسم الأول: {{firstname}}</p>

جرب بنفسك

أو، يمكنك استخدام ng-model تعليمات النصوص ترتبط النموذج بالعرض.

تعليمات النصوص ng-model

استخدام ng-model تعليمات النصوص تربط بيانات النموذج في العرض على وحدات التحكم HTML (input, select, textarea).

مثال

<input ng-model="firstname">

جرب بنفسك

ng-model تعليمات النصوص توفر الزامن الثنائي بين النموذج والعرض.

الزامن الثنائي

الزامن البياناتي في AngularJS هو التزامن بين النموذج والعرض.

عندما تتغير بيانات النموذج، سيعكس العرض هذا التغيير، وعندما تتغير بيانات العرض، سينتظر النموذج أيضًا. هذا يحدث فورًا وبشكل تلقائي، مما يضمن دائمًا تحديث النموذج والعرض.

مثال

<div ng-app="myApp" ng-controller="myCtrl">
  الاسم: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

جرب بنفسك

مستشاري AngularJS

يتم التحكم في التطبيقات في AngularJS من قبل السيطرة. يرجى قراءة المعلومات المتعلقة بالسيطرة في فصل السيطرة في AngularJS.

بسبب التزامن الفوري بين النموذج والعرض، يمكن لل控制器 الانفصال تمامًا عن العرض، وتركيز انتباهه فقط على بيانات النموذج. بسبب التزامن البياناتي في 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 = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

جرب بنفسك