AngularJS code7.CSS

You can easily combine the Code7.CSS stylesheet with AngularJS. This chapter shows how.

Code7.CSS

To integrate Code7.CSS into your AngularJS application, insert the following line into the head section of your document:

HTML Code

<!DOCTYPE html>
<html>
<link rel=”stylesheet” href=”https://www.code7school.com/code7css/4/w3.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body ng-app=”myApp” ng-controller=”userCtrl”>

<div class=”code7container”>

<h3>Users</h3>

<table class=”code7-table code7-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=”code7-btn code7-ripple” ng-click=”editUser(user.id)”>✎ Edit</button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr>
</table>
<br>
<button class=”code7-btn code7-green code7-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=”code7-input code7-border” type=”text” ng-model=”fName” ng-disabled=”!edit” placeholder=”First Name”>
  <br>
    <label>Last Name:</label>
    <input class=”code7-input code7-border” type=”text” ng-model=”lName” ng-disabled=”!edit” placeholder=”Last Name”>
  <br>
    <label>Password:</label>
    <input class=”code7-input code7-border” type=”password” ng-model=”passw1″ placeholder=”Password”>
  <br>
    <label>Repeat:</label>
    <input class=”code7-input code7-border” type=”password” ng-model=”passw2″ placeholder=”Repeat Password”>
<br>
<button class=”code7-btn code7-green code7-ripple” ng-disabled=”error || incomplete”>✔ Save Changes</button>
</form>

</div>

<script src= “myUsers.js”></script>

</body>
</html>