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 بطوری از این عنصر به اموال مدل مشخص شده متصل خواهد شد:
شما همچنین می توانید دو آکولاد استفاده {{ }} {{ }} {{ }} را به نمایش محتوای از مدل:
یا شما می توانید با استفاده از ng-model بخشنامه در HTML کنترل برای اتصال مدل به نمای.
ng-model بخشنامه
استفاده از ng-model بخشنامه برای اتصال به داده ها از مدل به نمایش در کنترل های HTML (ورودی، انتخاب، متنی)
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>
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.