❮ Previous Next ❯
You can easily use w3.css style sheet together with AngularJS. This chapter demonstrates how.
W3.CSS
To include W3.CSS in your AngularJS application, add the following line to the head of your document:
<link rel="stylesheet" href="https://www.Omegas.com/w3css/3/w3.css“>
If you want to study W3.CSS, visit our W3.CSS Tutorial.
Below is a complete HTML example, with all AngularJS directives and W3.CSS classes explained.
HTML Code
<link rel="stylesheet" href="https://www.Omegas.com/w3css/3/w3.css“>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js“>
Users
| Edit | First Name | Last Name |
|---|---|---|
| <button class="w3-btn w3-ripple" ng-click="editUser(user.id)”>✎ Edit |
{{ user.fName }} | {{ user.lName }} |
✎ Create New User
Create New User:
Edit User:
First Name:
Last Name:
Password:
Repeat:
✔ Save Changes
»
Directives (Used Above) Explained
AngularJS Directive Description
<body ng-app Defines an application for the element
<body ng-controller Defines a controller for the element
<tr ng-repeat Repeats the
<button ng-click Invoke the function editUser() when the element is clicked
<h3 ng-show Show the
s element if edit = true
<h3 ng-hide Hide the form if hideform = true, and hide the
element if edit = true
<input ng-model Bind the element to the application
<button ng-disabled Disables the element if error or incomplete = true
W3.CSS Classes Explained
Element Class Defines
w3-container A content container
w3-table A table
w3-bordered A bordered table
w3-striped A striped table
w3-btn A button
w3-green A green button
w3-ripple A ripple effect when you click the button
w3-input An input field
w3-border A border on the input field
JavaScript Code
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 Code Explained
Scope Properties Used for
$scope.fName Model variable (user first name)
$scope.lName Model variable (user last name)
$scope.passw1 Model variable (user password 1)
$scope.passw2 Model variable (user password 2)
$scope.users Model variable (array of users)
$scope.edit Set to true when user clicks on ‘Create user’.
$scope.hideform Set to true when user clicks on ‘Edit’ or ‘Create user’.
$scope.error Set to true if passw1 not equal passw2
$scope.incomplete Set to true if any field is empty (length = 0)
$scope.editUser Sets model variables
$scope.$watch Watches model variables
$scope.test Tests model variables for errors and incompleteness
❮ Previous Next ❯
Published
<input ng-model Bind the element to the application
<button ng-disabled Disables the element if error or incomplete = true
W3.CSS Classes Explained
Element Class Defines
shahzade bau 