AngularJS și W3.CSS

Puteți utiliza cu ușurință foaie de stil w3.css împreună cu AngularJS. Acest capitol demonstrează modul în care.

W3.CSS

Pentru a include W3.CSS în aplicația AngularJS, adăugați următoarea linie la capul documentului:

Dacă doriți să studieze W3.CSS, accesați Tutorial W3.CSS .

Mai jos este un exemplu complet HTML, cu toate AngularJS directivele și clasele W3.CSS a explicat.

Codul HTML

<!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>

Încearcă - l singur »

Directivele (Used Above) pe înțelesul tuturor

Directiva AngularJS	Descriere
<Body ng-app	Definește o aplicatie pentru <body> Elementul
<Corp ng-controler	Definește un controler pentru <body> Elementul
<Tr ng-repeat	Repetă <tr> elementul pentru fiecare utilizator din utilizatori
<Butonul ng-clic	Invoca funcția editUser() atunci când <button> elementul este apăsat
<H3 ng-show	Arată elementul <h3> s = true dacă edita
<H3 ng-hide	Ascunde formular , dacă hideform = true, și ascunde <h3> elementul dacă edita = true
<Input ng model	Legați <input> elementul la aplicația
<Butonul ng-dezactivat	Dezactivează <button> Element dacă eroarea sau incomplete = true

Clasele W3.CSS pe înțelesul tuturor

Element	Clasă	defineste
<Div>	w3-container	Un container conținut
<Table>	W3-tabel	O masa
<Table>	W3-marginita	Un tabel mărginit
<Table>	W3-dungi	Un tabel cu dungi
<Buton>	W3-BTN	Un buton
<Buton>	W3-verde	Un buton verde
<Buton>	W3-unda	Un efect de unda atunci când faceți clic pe butonul
<Input>	w3-input	Un câmp de intrare
<Input>	W3-frontieră	O frontieră pe câmpul de introducere

Codul JavaScript

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;
}
};

});

Codul JavaScript pe înțelesul tuturor

Proprietăți Domeniul de aplicare	Folosit pentru
$ scope.fName	Model de variabilă (user first name) mai (user first name)
$ scope.lName	Model de variabilă (user last name)
$ scope.passw1	Model de variabilă (user password 1)
$ scope.passw2	Model de variabilă (user password 2)
$ scope.users	Model de variabilă (array of users)
$ scope.edit	Setați la true atunci când utilizatorul face clic pe „Creați un utilizator“.
$ scope.hideform	Setați la true atunci când utilizatorul face clic pe „Editați“ sau „Creare utilizator“.
$ scope.error	Setați la true dacă passw1 nu passw2 egal
$ scope.incomplete	Setați la true dacă orice câmp este gol (length = 0)
$ scope.editUser	Seturi de variabile de model
$ Domeniul de aplicare. $ Ceas	variabile model de ceasuri
$ scope.test	Teste variabile de model pentru erori și incompletitudine

❮ Anterior Urmatorul capitol ❯

Angular Tutorial

Angular Exemple

Angular Referinţă