Kolayca angularjs birlikte w3.css stil sayfasını kullanabilirsiniz. Bu bölüm nasıl kullanılacağını gösterir.
W3.CSS
senin angularjs uygulamasında W3.CSS eklemek için, dokümanın başına aşağıdaki satırı ekleyin:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Eğer W3.CSS incelemek istiyorsanız, bizim ziyaret W3.CSS Eğitimi .
Aşağıda tam bir HTML örneği tüm angularjs direktifler ve W3.CSS sınıfları açıkladı sahip olduğunu.
HTML Kodu
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<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 class="w3-btn w3-ripple" ng-click="editUser(user.id)">✎
Edit</button>
</td>
<td>{{
user.fName }}</td>
<td>{{ user.lName }}</td>
</tr>
</table>
<br>
<button class="w3-btn w3-green w3-ripple"
ng-click="editUser('new')">✎ 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
class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">✔
Save Changes</button>
</form>
</div>
<script src= "myUsers.js"></script>
</body>
</html> Kendin dene " Direktifleri (Used Above) Açıklaması
| angularjs Yönergesi | Açıklama |
|---|---|
| <Vücut ng uygulama | Için bir uygulama tanımlar <body> elemanı |
| <Vücut ng kontrol cihazı | Için bir kontrol tanımlar <body> elemanının |
| <Tr ng tekrar | Tekrarlar <tr> kullanıcılar her kullanıcı için eleman |
| <Düğme ng tıklama | Fonksiyon çağırma editUser() zaman <button> eleman tıklandığında |
| <H3 ng göster | edit = true olursa <h3> lar eleman göster |
| <H3 ng gizleme | Hideform = true olursa formu gizleme ve gizlemek <h3> edit = true eğer eleman |
| <Giriş ng model | Bağlama <input> uygulamaya elemanının |
| <Düğmesi ng özürlü | Devre dışı bırakır <button> eleman eğer hata veya eksik = true |
W3.CSS Sınıflar Açıklaması
| Eleman | Sınıf | tanımlar |
|---|---|---|
| <Div> | w3-konteyner | Bir içerik kabı |
| <Table> | w3 masa | Bir masa |
| <Table> | w3-sınırlanmıştır | Kenarlıklı bir tabloda |
| <Table> | w3-çizgili | Çizgili tablosu |
| <Düğmesi> | w3-btn | Düğme |
| <Düğmesi> | w3-yeşil | Yeşil bir düğme |
| <Düğmesi> | w3-dalgalanma | Bir dalga etkisi yaparken butonuna tıklayın |
| <Input> | w3 girişli | Bir giriş alanı |
| <Input> | w3 ötesi | giriş alanına üzerine bir sınır |
JavaScript kodu
myUsers.js
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;
}
};
});JavaScript kodu Açıklaması
| Kapsam Özellikleri | İçin kullanılır |
|---|---|
| $ scope.fName | Model değişken (user first name) |
| $ scope.lName | Model değişken (user last name) |
| $ scope.passw1 | Model değişken (user password 1) |
| $ scope.passw2 | Model değişken (user password 2) |
| $ scope.users | Model değişken (array of users) |
| $ scope.edit | true değerine ayarlayın kullanıcının kullanıcı oluştur 'tıkladığında. |
| $ scope.hideform | kullanıcının kullanıcı oluştur ' 'Edit' ya tıkladığında gerçek zaman olarak ayarlayın. |
| $ scope.error | passw1 eşit değildir passw2 true olarak |
| $ scope.incomplete | True belirlenmiş bir alan boş ise, (length = 0) |
| $ scope.editUser | Model değişkenleri ayarlar |
| $ Kapsamı. $ Izle | Saatler modeli değişkenleri |
| $ scope.test | hataları ve eksiklik modeli değişkenleri Testleri |