أحدث البرامج التعليمية وتطوير الشبكة
 

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 تحكم الفصل.

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

❮ السابق التالي الفصل ❯