THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS and W3.CSS


You can undoubtedly utilize w3.css template together with AngularJS. This part exhibits how.


W3.CSS

To incorporate W3.CSS in your AngularJS application, include the accompanying line to the leader of your document:

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

If you need to examine W3.CSS, visit our W3.CSS Tutorial.

Below is a finished HTML precedent, with all AngularJS mandates and W3.CSS classes explained.


HTML Code

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://www.welookups.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-flanked 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)">&#9998; 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')">&#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 class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">&#10004; Spare Changes</button>
</form>

</div>

<script src= "myUsers.js"></script>

</body>
</html>
Try it Yourself »

Directives (Used Above) Explained

AngularJS Directive Description
<body ng-app Defines an application for the <body> element
<body ng-controller Defines a controller for the <body> element
<tr ng-repeat Repeats the <tr> component for every client in users
<button ng-click Invoke the capacity editUser() when the <button> component is clicked
<h3 ng-show Show the <h3>s component if alter = true
<h3 ng-hide Hide the structure if hideform = genuine, and shroud the <h3> component if alter = true
<input ng-model Bind the <input> component to the application
<button ng-disabled Disables the <button> component if blunder or fragmented = true

W3.CSS Classes Explained

Element Class Defines
<div> w3-container A content container
<table> w3-table A table
<table> w3-bordered A circumscribed table
<table> w3-striped A striped table
<button> w3-btn A button
<button> w3-green A green button
<button> w3-ripple A progressively outstretching influence when you click the button
<input> w3-input An input field
<input> w3-border A verge on the info 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 = genuine;
$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 = work() {
  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 (client first name)
$scope.lName Model variable (client last name)
$scope.passw1 Model variable (client secret key 1)
$scope.passw2 Model variable (client secret key 2)
$scope.users Model variable (exhibit of users)
$scope.edit Set to genuine when client taps on 'Make user'.
$scope.hideform Set to genuine when client taps on 'Alter' or 'Make user'.
$scope.error Set to genuine if passw1 not equivalent passw2
$scope.incomplete Set to genuine if any field is unfilled (length = 0)
$scope.editUser Sets display variables
$scope.$watch Watches demonstrate variables
$scope.test Tests show factors for blunders and incompleteness