ممکن است ما فرمی را در سمت کاربر قرار دهیم تا اطلاعاتی را از کاربر دریافت کنیم و در سمت سرور ذخیره کنیم , اکنون اگر بخواهیم مقادیر تکمیل شده توسط کاربر را بررسی کنیم , بهتراست که این بررسی در سمت کاربر انجام شود تا حجم انتقال اطلاعات (بار ترافیکی سرور) کاهش یابد . یکی از این کنترل ها CheckBox میباشد که میتوانیم از روش های مختلفی وضعیت آن را چک کنیم .در این مقاله به بررسی وضعیت این کنترل توسط AngularJS می پردازیم

برای بررسی وضعیت CheckBox مطابق مراحل زیر عمل میکنیم :

در ابتدا باید یک کنترل CheckBox در صفحه قرار دهیم

<div ng-app="MyApp" ng-controller="MyController">
            آیا شما برنامه نویس هستید?
            <label for="chkPassport">
                <input id="chkPassport" type="checkbox" ng-model="HasPassport" />
            </label>
            <input type="button" value=" بررسی شود" ng-click="CheckPassport()" />
        </div>

اگر به تگ های بالا دقت کنید , مشاهده میکنید که به تگ div , دو خاصیت با نامهای ng-app و ng-controller اختصاص داده ایم که این دو خاصیت مربوط مستقیماً به AnularJS متصل میشود .همچنین در تگ Checkbox نیز خاصیتی با نام ng-model قرار داده شده و برای دکمه نیز خاصیت ng-click مانند تگ div به angularJS متصل میشوند . هنگامی که دکمه کلیک میشود , تابع CheckDeveloper بررسی میکند که آیا کنترل CheckBox انتخاب شده است یا خیر . که در این حالت اگر انتخاب شده باشد پیغام "چک باکس انتخاب شده" و در غیر اینصورت پیغام "چک باکس انتخاب نشده " را نمایش میدهد .در ادامه میتوانید دستور مربوط به تابع ذکر شده را مشاهده فرمایید :

<script type="text/javascript">
            var app = angular.module('MyApp', [])
            app.controller('MyController', function ($scope, $window) {
                $scope.CheckDeveloper = function () {
                    if ($scope.HasPassport) {
                        $window.alert("چک باکس انتخاب شده  ");
                    } else {
                        $window.alert(" چک باکس انتخاب نشده  ");
                    }
                };
            });
        </script>

آموزش angular