آموزش گام به گام AngularJS قسمت پنجم: پیاده سازی عملیات CRUD توسط AngularJS

بازدید کنندگان : 1379 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
در مقاله قبل با اعتبارسنجی فرم ها آشنا شدیم ، در این مقاله عملیات CRUD (Create,Read,Update,Delete) را با اطلاعات JSON انجام داده و در مقاله بعدی این کار در بانک اطلاعاتی اجرا میگردد .
اگر مقاله سوم را به خاطر داشته باشید یک جدول از اطلاعات را از طریق ng-repeat به نمایش گذاشتیم و عملیات فیلتر و مرتب سازی را انجام دادیم .
اکنون میخواهیم گزینه Edit و Delete و Add را به این پروژه اضافه کنیم .
برای پیاده سازی Add یک فرم ایجاد کرده و فیلد هارا مدل میکنیم ، سپس یک تابع به نام add ایجاد کرده و از طریق متد push اطلاعات داخل فرم را به آرایه اضافه می کنیم :
<p>Name : <input type="text" ng-model="name" /></p> 
<p>Family : <input type="text" ng-model="family" /></p> 
<input type="button" value="Add" ng-click="add()" ng-hide="isEditing
و
         $scope.add = function () {

 

            $scope.myData.push({ name: $scope.name, family: $scope.family })

            $scope.name = '';

            $scope.family = '';

همانطور که ملاحظه می کنید از طریق ng-click تابع add به شکل فوق فراخوانی شده است و پس از درج اطلاعات مقادیر این 
دوفیلد را خالی کردیم 
اکنون دو Button در داخل جدول برای Edit و Delete اضافه می کنیم که از طریق ng-click متد های مربوط به خودشان را به 
پارامتر ورودی $index فراخوانی میکنند ، $index اندیس سطر بایند شده به آرایه را وارد تابع خواهد کرد :
        <table> 
            <tr> 
                <th ng-click="sortOrder='name'">Name</th> 
                <th ng-click="sortOrder='family'">Family</th> 
                <th>Actions</th> 
            </tr> 
            <tr ng-repeat="row in myData | filter:search | orderBy:sortOrder"> 
                <td>{{row.name}}</td> 
                <td>{{row.family}}</td> 
                <td> 
 
                    <input type="button" ng-click="delete($index)" value="Delete" /> 
                    <input type="button" ng-click="edit($index)" value="Edit" /> 
 
                </td> 
            </tr> 
        </table> 
سپس برای حذف از متد splice استفاده کرده و برای ویرایش اطلاعت را داخل فرم میریزیم و یک دکمه دیگر برای Update اضافه 
می کنیم تا اطلاعات را جایگزین کند :
<input type="button" value="update" ng-click="update()" ng-show="isEditing" /> 
<input type="button" value="cancel" ng-click="cancel()" ng-show="isEditing" /> 
 
کد های جاوا اسکریپت نهایی به شکل زیر خواهد بود :
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function ($scope) { 
 
 
        var isEditing = false; 
        var selectedtIndex = -1; 
 
        $scope.delete = function (i) { 
 
            $scope.myData.splice(i, 1); 
 
        } 
 
 
        $scope.edit = function (i) { 
 
            $scope.name = $scope.myData[i].name; 
            $scope.family = $scope.myData[i].family; 
 
            $scope.isEditing = true; 
            $scope.selectedtIndex = i; 
        } 
 
        $scope.add = function () { 
 
            $scope.myData.push({ name: $scope.name, family: $scope.family }) 
            $scope.name = ''; 
            $scope.family = ''; 
        } 
 
        $scope.update = function () { 
 
 
            $scope.myData[$scope.selectedtIndex].name = $scope.name; 
            $scope.myData[$scope.selectedtIndex].family = $scope.family; 
 
            $scope.isEditing = false; 
 
            $scope.name = ''; 
            $scope.family = ''; 
        } 
 
        $scope.cancel = function () { 
 
            $scope.isEditing = false; 
            $scope.name = ''; 
            $scope.family = ''; 
        } 
 
 
        $scope.myData = [ 
        { name: 'Ali', family: 'Delshad' }, 
        { name: 'Hamid', family: 'Sadeghi' }, 
        { name: 'Amir', family: 'Olfat' }, 
        { name: 'Keyvan', family: 'Nasr' } 
        ]; 
 
 
    }); 
کد بسیار ساده و واضح هستند ، متغیر isEditing که در ng-show و ng-hide استفاده شده برای فعال و غیر فعال کردن دکمه ها در 
هنگام Add یا Edit ایجاد شده است . 
 
نتیجه نهایی را ملاحظه کنید :
 

در مقالعه بعدی با مباحث AngularJS AJAX بیشتر آشنا می شوید.

 

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