AngularJS و W3.CSS

AngularJS و W3.CSS

شما می توانید به آسانی از w3.css و AngularJS با هم استفاده کنید. در این مقاله قصد داریم نحوه انجام این کار را به شما آموزش دهیم.

W3.CSS

برای آنکه فایل W3.CSS شما با برنامه کاربردی AngularJS شما همراه شود باید خط زیر را به قسمت head خود اضافه کنید.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

در زیر یک مثال HTML کامل را با استفاده از AngularJS و کلاس w3.css را توضیح می دهیم.

کد HTML

<body ng-app="myApp" ng-controller="userCtrl"> <div class="w3-container"> <h3>Users</h3> <table class="w3-table w3-bordered w3-striped"> <tr> <th>Edit</th> <th>First Name</th> <th>Last Name</th> </tr> <tr ng-repeat="user in users"> <td> <button type="button" class="w3-btn w3-ripple" ng-click="editUser(user.id)">&#9998; Edit</button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr> </table> <br> <button type="button" class="w3-btn w3-green w3-ripple" ng-click="editUser('new')">&#9998; Create New User</button> <form ng-hide="hideform"> <h3 ng-show="edit">Create New User:</h3> <h3 ng-hide="edit">Edit User:</h3> <label>First Name:</label> <input class="w3-input w3-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name"> <br> <label>Last Name:</label> <input class="w3-input w3-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name"> <br> <label>Password:</label> <input class="w3-input w3-border" type="password" ng-model="passw1" placeholder="Password"> <br> <label>Repeat:</label> <input class="w3-input w3-border" type="password" ng-model="passw2" placeholder="Repeat Password"> <br> <button type="button" class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">&#10004; Save Changes</button> </form> </div> <script src="http://www.tahlildadeh.com/Jquery/Angular/myUsers.js"></script> </body>

توضیح Directive های استفاده شده در مثال بالا

یک برنامه کاربردی برای المان تعریف می کند.

<body ng-app="myApp">

یک کنترلر برای المان body تعریف می کند.

<ng-controller="userCtrl">

به ازای هر کاربر, المان tr در کاربرها تکرار می کند.

<tr ng-repeat="user in users">

فراخوانی تابع()editUser وقتی button کلیک می شود

< button ng-click="">

هرگاه edit=true باشد, h3 ها را نمایش می دهد.

<h3 ng-show="">

هرگاه hideform=true فرم و وقتی edit=true باشد h3 را مخفی می کند.

<h3 ng-hide="">

المان input را به برنامه کاربردی متصل می کند.

< button ng-model>

اگر خطایی رخ دهد و یا incomplete=true باشد المان button را غیر فعال می کند

< button ng- disabled>

توصیف کلاس های W3.CSS

محتوای Container

<Div clas="w3- Cntainer" >

جدول

<table class="w3- table ">

حاشیه جدول

<table class="w3- bordered">

جدول راه راه

<table class="w3- striped">

کلید

<button class= w3- btn">

کلید سبز رنگ

<button class=" w3-green">

افکت موجی در هنگام کلیک کردن

<button class=" w3-ripple">

مقدار ورودی

<input class=" w3- input">

لبه در مقدار ورودی

<input class=" w3- border">

کد JavaScript

angular.module('myApp', []).controller('userCtrl', function ($scope) { $scope.fName = ''; $scope.lName = ''; $scope.passw1 = ''; $scope.passw2 = ''; $scope.users = [ { id: 1, fName: 'Hege', lName: "Pege" }, { id: 2, fName: 'Kim', lName: "Pim" }, { id: 3, fName: 'Sal', lName: "Smith" }, { id: 4, fName: 'Jack', lName: "Jones" }, { id: 5, fName: 'John', lName: "Doe" }, { id: 6, fName: 'Peter', lName: "Pan" } ]; $scope.edit = true; $scope.error = false; $scope.incomplete = false; $scope.hideform = true; $scope.editUser = function (id) { $scope.hideform = false; if (id == 'new') { $scope.edit = true; $scope.incomplete = true; $scope.fName = ''; $scope.lName = ''; } else { $scope.edit = false; $scope.fName = $scope.users[id - 1].fName; $scope.lName = $scope.users[id - 1].lName; } }; $scope.$watch('passw1', function () { $scope.test();}); $scope.$watch('passw2', function () { $scope.test();}); $scope.$watch('fName', function () { $scope.test();}); $scope.$watch('lName', function () { $scope.test();}); $scope.test = function () { if ($scope.passw1 !== $scope.passw2) { $scope.error = true; } else { $scope.error = false; } $scope.incomplete = false; if ($scope.edit &&(!$scope.fName.length || !$scope.lName.length || !$scope.passw1.length || !$scope.passw2.length)) { $scope.incomplete = true; } }; });

توضیح کدهای Java Script

scope.fName$:نام کاربر

scope.lName$ :نام خانوادگی کاربر

scope.passw1 $ : پسورد 1

scope.passw2 $ : پسورد 2

scope.users$ :آرایه ای از کاربران

scope.edit$ :هرگاه کاربر روی کلید Creat User کلیک کند مقدارآن true می شود.

scope.hideform$ :هرگاه کاربر روی کلید Edit کلیک کند مقدار آن trueمی شود.

scope.error$ :هرگاه passw1 و passw2 یکسان نباشند مقدار آن true می شود.

scope: $incomplete هرگاه مقداری خالی باشد( length=0 ) مقدار آن true می شود.

scope.editUser$ :مجموعه از متغیرهای مدل

scope.$watch$ :متغیرهای مدل Watch

scope.test$: متغیرهای تست مدل برای خطاها و مقدارهای کامل نشده



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



عبارت امنیتی : حاصل 5 × 1 می شود :
متن پیام :