آموزش گام به گام AngularJS قسمت دوم : آشنایی با کنترلر ها (Controller) و ng-repeat

بازدید کنندگان : 1782 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS

در مقاله قبل با Angular و Directive ها آشنا شدیم ، در این مقاله کمی بیشتر روی مثال قبلی کار میکنیم .

همانطور که دیدید یک Input text ساده را به یک span بایند کردیم ، این عمل از طریق ng-model و ng-bind اتفاق افتاد ، از طریق ng-init مقدار دهی اولیه انجام شد و ng-click به ما کمک کرد تا در هنگام کلیک مقدار داخل فیلد را خالی کنیم .
اکنون میخواهیم اطلاعات وارد شده در input را توسط یک دکمه ثبت و در یک لیست نمایش دهیم .
برای این منظور به سراغ کنترل ها میرویم
کد نویسی های ما درون کنترلر انجام میشود به عبارتی کنترل ها اطلاعات داخل یک ng-app را کنترل میکنند
برای تعریف یک controller از ng-controller استفاده می کنیم ، دقت کنید که وقتی میخواهید یک کنترل به صفحه اضافه کنید ng-app شما باید مقدار دهی شود ، این مقدار یک اسم دلخواه است
پس از تعریف ng-app و ng-controller به سراغ تگ script میرویم و Application که مایل هستیم کنترل کنیم را توسط کد زیر تعریف می کنیم :
 

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

و سپس بلاک کد کنترلر را تعریف می کنیم :
app.contrller('myController',function($scope){

 

 

 

});
اکنون در بلاک فوق میتوانیم دیتای صفحه ( مدل ) را کنترل کنیم .
اکنون سوال اینجاست ما چه چیزی را میخواهیم کنترل کنیم ؟
طبق تعریف میخواهیم مقدار داخل input را در یک لیست ( مثلا ul li ) نمایش دهیم ، برای این منظور نیاز هست مقدار داخل input در یک آرایه ریخته شود سپس کافیست آرایه به لیست ul li بایند شود .
 
 
بدین منظور داخل بلاک کنترلر ، آرایه nameList را ایجاد و دو مقدار اولیه برای آن درج می کنیم :
app.controller('myController',function($scope){

 

$scope.nameList=['Ali','Hamid'];

 

});
برای بایند کردن یک لیست ( مثل table یا ul )  به آرایه از ng-repeat استفاده می کنیم :
<ul>

<li ng-repeat="n in nameList" >

{{n}}

</li>

</ul>
اگر با foreach آشنا باشید کد داخل ng-repeat برای شما کاملا واضح خواهد بود ، ما یک متغیر به نام n تعریف کردیم که داخل یک آرایه به نام nameList  تکرار میشود ، سپس از طریق {{n}} مقدار n را نمایش میدهیم ، اصطلاحا در Angular به نمایش دیتا توسط {{}} روش Expression میگویند .
دقت نمایید میتوانستیم به جای روش Expression از ng-bind نیز استفاده نماییم :
<li ng-repeat="n in nameList"  ng-bind="n" >
سپس نوبت اضافه کردن دکمه و ثبت اطلاعات داخل آرایه فوق است ، بدین منظور ابتدا یک input از نوع submit اضافه کرده و ng-click را به یک function به نام addName متصل می کنیم:
<input type="submit" ng-click="addName()" >
در این تابع از متد push برای اضافه کردن مقدار به لیست استفاده می کنیم :
app.controller('myController',function($scope){

$scope.nameList=['Ali','Hamid'];

$scope.addName=function()

{

$scope.nameList.push($scope.name);
 
$scope.name='';

};

});
نتیجه نهایی به شکل زیر خواهد بود :
 
در مقاله بعد با Sorting و Filtering در AngularJS آشنا خواهید شد

منابع :

نظرات کاربران