最新的Web開發教程
 

AngularJS和W3.CSS


您可以輕鬆地AngularJS一起使用w3.css樣式表。 本章將介紹如何。


W3.CSS

要包含W3.CSS在AngularJS應用,下面一行添加到您的文檔的頭部:

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

如果你想學習W3.CSS,請訪問我們的W3.CSS教程

下面是一個完整的HTML的例子,所有的AngularJS指令和W3.CSS上課。


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)">&#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; Save Changes</button>
</form>

</div>

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

</body>
</html>
試一試»

指令(上面使用)解釋

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> element for each user in users
<button ng-click Invoke the function editUser() when the <button> element is clicked
<h3 ng-show Show the <h3>s element if edit = true
<h3 ng-hide Hide the form if hideform = true, and hide the <h3> element if edit = true
<input ng-model Bind the <input> element to the application
<button ng-disabled Disables the <button> element if error or incomplete = true

W3.CSS類的解釋

Element Class Defines
<div> w3-container A content container
<table> w3-table A table
<table> w3-bordered A bordered table
<table> w3-striped A striped table
<button> w3-btn A button
<button> w3-green A green button
<button> w3-ripple A ripple effect when you click the button
<input> w3-input An input field
<input> w3-border A border on the input field

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

});

JavaScript代碼解釋

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