AngularJS ma’lumotlarni bog‘lash
AngularJS’da ma’lumotlarni bog‘lash — bu model va ko‘rinish (view) o‘rtasidagi sinxronizatsiya.
Ma’lumotlar modeli
AngularJS ilovalarida odatda ma’lumotlar modeli bo‘ladi.
Ma’lumotlar modeli — ilova uchun mavjud bo‘lgan ma’lumotlar to‘plami.
Misol
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
HTML ko‘rinishi (view)
AngularJS ilovasi ko‘rsatiladigan HTML konteyner ko‘rinish (view) deb ataladi.
Ko‘rinish modelga kira oladi va model ma’lumotlarini ko‘rinishda aks ettirishning bir necha usuli mavjud.
Elementning innerHTML’ini modelning ko‘rsatilgan xususiyatiga bog‘laydigan ng-bind direktivasidan foydalanishingiz mumkin:
Modeldagi ma’lumotlarni ko‘rsatish uchun qo‘sh jingalak qavslardan {{ }} ham foydalanishingiz mumkin:
Yoki modelni ko‘rinishga bog‘lash uchun HTML boshqaruv elementlarida ng-model direktivasidan foydalanishingiz mumkin.
ng-model direktivasi
HTML boshqaruv elementlarida (input, select, textarea) modeldagi ma’lumotlarni ko‘rinishga bog‘lash uchun ng-model direktivasidan foydalaning
ng-model direktivasi model va ko‘rinish o‘rtasida ikki tomonlama bog‘lashni ta’minlaydi.
Ikki tomonlama bog‘lash
AngularJS’da ma’lumotlarni bog‘lash — bu model va ko‘rinish (view) o‘rtasidagi sinxronizatsiya.
Modeldagi ma’lumotlar o‘zgarganda ko‘rinish bu o‘zgarishni aks ettiradi, ko‘rinishdagi ma’lumotlar o‘zgarganda esa model ham yangilanadi.
Bu darhol va avtomatik tarzda sodir bo‘ladi, bu esa model va ko‘rinishning har doim yangilangan bo‘lishini ta’minlaydi.
Misol
<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>
O‘zingiz sinab ko‘ring »
AngularJS kontrolleri
AngularJS’dagi ilovalar kontrollerlar tomonidan boshqariladi.
Kontrollerlar haqida AngularJS kontrollerlari bobida o‘qing.
Model va ko‘rinish darhol sinxronlanishi tufayli kontroller ko‘rinishdan butunlay ajratilgan bo‘lishi va faqat model ma’lumotlariga e’tibor qaratishi mumkin.
AngularJS’dagi ma’lumotlarni bog‘lash tufayli ko‘rinish kontrollerda kiritilgan har qanday o‘zgarishni aks ettiradi.
Misol
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!