logo-mini

AngularJS اتصال داده ها

اطلاعات اتصال در AngularJS هماهنگ سازی بین مدل و نمایش است.


مدل داده

ANGULARJS برنامه های کاربردی معمولا یک مدل داده اند. مدل داده مجموعه ای از داده های موجود برای نرم افزار است.

مثال

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.firstname = “John”;

    $scope.lastname = “Doe”;

});


HTML نمایش

ظرف HTML که در آن برنامه از AngularJS نمایش داده می شود است، از نظر نامیده می شود.

دیدگاه دسترسی به این مدل، و چندین راه برای نمایش داده ها مدل در نظر وجود دارد.

شما می توانید با استفاده از ng-bind بخشنامه، که innerHTML بطوری از این عنصر به اموال مدل مشخص شده متصل خواهد شد:

مثال

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

خودت آن را امتحان کن “

شما همچنین می توانید دو آکولاد استفاده {{ }} {{ }} {{ }} را به نمایش محتوای از مدل:

مثال

<p>First name: {{firstname}}</p>

خودت آن را امتحان کن “

یا شما می توانید با استفاده از ng-model بخشنامه در HTML کنترل برای اتصال مدل به نمای.


ng-model بخشنامه

استفاده از ng-model بخشنامه برای اتصال به داده ها از مدل به نمایش در کنترل های HTML (ورودی، انتخاب، متنی)

مثال

<input ng-model=”firstname”>

خودت آن را امتحان کن “

ng-model بخشنامه دو طرفه اتصال بین مدل و نظر فراهم می کند.


binding دو طرفه

اطلاعات اتصال در 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 بر حسب نوری فصل است.

از آنجا که از هماهنگ سازی فوری از مدل و مشاهده، کنترل را می توان به طور کامل از نظر جدا شده، و به سادگی بر روی داده های مدل تمرکز کنید. با تشکر از داده ها اتصال در AngularJSS، از نظر هر گونه تغییرات ساخته شده در کنترل را منعکس کند.

مثال

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

خودت آن را امتحان کن “

 


نظر بدهید