HTML

You can use AngularJS to create or control HTML element dynamically.

Creating a Table

Like creating a bullet list, the ng-repeat directive is ideal for creating a table.

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http){
$http.get("family.php")
.then(function (response) {$scope.names = response.data.family_member;});
});
</script>

<div ng-app="myApp" ng-controller="myCtrl"> 
  <table>
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Gender</th>
    </tr>
    
    <tr ng-repeat="x in names">
      <td>{{x.Name}}</td>
      <td>{{x.City}}</td>
      <td>{{x.Gender}}</td>
    </tr>
  </table>
</div>

Now, you can use CSS to style the table:

<style>
table, th, td{
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
font-family: Arial;
font-weight: bold;
}
table th{background-color:black; color:white;}
table tr:nth-child(odd){
background-color:#94BFF1; color: white;
}
table tr:nth-child(even){
background-color:antiquewhite;
}
</style>

HTML: Table Demo

Let's add two filters to the table ($orderBy and uppercase). Add the following highlighted code to the previous code within the <table> tag:

<table>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Gender</th>
  </tr>
    
  <tr ng-repeat="x in names | orderBy:'Name'">
    <td>{{x.Name}}</td>
    <td>{{x.City}}</td>
    <td>{{x.Gender | uppercase}}</td>
  </tr>
</table>

HTML: Table with Fillters

Now, let's add another row to display index values. Add the following highlighted code to the previous code within the <table> tag:

<table>
  <tr>
    <th></th>
    <th>Name</th>
    <th>City</th>
    <th>Gender</th>
  </tr>
    
  <tr ng-repeat="x in names | orderBy:'Name'">
    <td>{{$index + 1}}</td>  
    <td>{{x.Name}}</td>
    <td>{{x.City}}</td>
    <td>{{x.Gender | uppercase}}</td>
  </tr>
</table>

HTML: Table with Index Values

Enable/Disable An HTML Element

You can use the ng-disabled directive to bind the applications data to the disabled attribute of HTML elements to toggle it to true/false. In the example below, if the value of mySwitch evaluates to true, the button will be disabled; otherwise, it will be enabled:

<div ng-app="" ng-init="mySwitch=true">
<input type="checkbox" ng-model="mySwitch"/>Enable/Disable Button
<button ng-disabled="mySwitch">Click Me!</button>
</div>
HTML: Enable/Disable Demo

Show/Hide An HTML Element

You can use the ng-show or ng-hide directives to show or hide an HTML element:

<div ng-app="">
  <ul>
    <li><p ng-show="true">This text will be shown.</p></li>
    <li><p ng-show="false">This text will be  hidden.</p><p>[hidden text]</p></li>
    <li><p ng-hide="true">This text will be hidden.</p><p>[hidden  text]</p></li>
    <li><p ng-hide="false">This text will be shown!.</p></li>
  </ul>
</div>
HTML: Show/Hide Demo

Create Form Elements

You can create a host of form input control elements dynamically. Remember the ng-model is used to BIND the input control (see below) to the application data.

Drop-down menu

You can use the ng-options directive to create a drop-down menu from an array or object.

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.names = ["Cornelius","Sheila","Joshua","Josiah"];
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedName" ng-options="x for x in names"></select>
</div>
HTML: Drop-Down Menu Demo

You could have use the ng-repeat directive as in the example below, but the advantage of using the ng-options directive allow the selected value to be an object, while the ng-repeat directive must use a string.

<script>
var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
$scope.names = ["Cornelius","Sheila","Joshua","Josiah"];
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
<select>
  <option ng-repeat="x in names">{{x}}</option>
 </select>
</div>

NOTE: Notice that the first value is displayed in the drop-down menu using the ng-repeat directive.

HTML: Drop-Down Menu Demo 2

Here is an example of using ng-options with an object. The advantage of using an option instead of a string:

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.family_member = [
{name:  "Cornelius Chopin", gender: "male"},
{name: "Sheila Chopin", gender: "female"},
{name: "Joshua Chopin", gender: "male"},
{name: "Josiah Chopin", gender: "male"},
];
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <p>Select a family member:</p>
  <select ng-model="selectedMember" ng-options="x.name for x in family_member"></select>
  <h1>You selected: {{selectedMember.name}}</h1>
  <p>Gender: {{selectedMember.gender}}</p>
</div>
HTML: Drop-Down Menu Demo 3

Checkbox

A Checkbox has the value of true or false. 

<div ng-app="">
<form>
  <p>Check to show or hide message:</p>
  <input type="checkbox" ng-model="myMsg">
</form>
<h1 ng-show="myMsg">Hello, World!</h1>
</div>
HTML: Checkbox Demo

Radio Buttons

Radio buttons uses the SAME ng-model but have different values but only the selected button is used.

<body ng-app="">
<form>
  <p>Pick a pizza topping:</p>
  <input type="radio" ng-model="myTopping" value="cheese">Cheese
  <input type="radio" ng-model="myTopping" value="peperoni">Peperoni
  <input type="radio" ng-model="myTopping" value="bacon">Bacon
</form>

<div ng-switch="myTopping">
  <div ng-switch-when="cheese">
    <h1>Cheese</h1>
    <p>We use the best cheese on the market.</p>
  </div>
  <div ng-switch-when="peperoni">
    <h1>Peperoni</h1>
    <p>We use spicy peperoni.</p>
  </div>
  <div ng-switch-when="bacon">
    <h1>Bacon</h1>
    <p>We use Canadian bacon.</p>
  </div>
</div>

</body>
HTML: Radio Buttons Demo

Form Validation

AngularJS offers client-side form validation by monitoring the state of the form and input fields (select, input, textarea) and notify the user about the current state and whether they have been modified or not. Standard HTML5 attributes can be used to validate input or you can create your own validation functions.

CAUTION: You need both client-side and server-side validation to ensure your web site is secured.

In the example below, if you type into the text field, you will see the state change from false to true:

<body ng-app="">
<p>Type into text field to see state change:</p>
<form name="myForm">
  <input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is: <strong>{{myForm.myInput.$valid}}</strong></p>
</body>
HTML: Form Validation Demo

In this example, a valid email address is needed:

<body ng-app="">
<p>Type a valide email address into the field to see the state change:</p>
<form name="myForm">
  <input type="email" name="myInput" ng-model="myInput">
</form>
<p>The input's valid state is:<strong>{{myForm.myInput.$valid}}</strong></p>
</body>

NOTE: Note that the state of the input field is "true" before you start writing in it, even if it does not contain an e-mail address. Change this so that it is false initially using a controller.

HTML: Form Validation Demo 2

AngularJS is constantly updating the state of BOTH the form itself and the form’s input fields.
The following properties represent the state that input fields can have and it is either true or false:

The form itself can have the following states which also is true or false:

States can be used to display messages about the “state” of the form or the form’s input fields. In the example below, an error message is displayed if the field has been touched AND is EMPTY:

<p>Tab to the next field to see the error message:</p>
<form name="myForm">
<label id="yourName" for="yourName">Name:</label>
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Name is required.</span>
<br/><br/>

<label name="myEmail">Email:</label>
<input id="myEmail" name="myEmail" ng-model="myEmail" required>
</form>
HTML: Form Validation Demo 3

AngularJS adds or removes classes from a form or form’s input fields depending on their states.
The following classes are added or removed from input fields:

The following classes are added or removed from the form itself. The class is removed if the value is false.

In the example below, styles are added to give application a more intuitive interface. Since input fields are required, they will become green when typed into:

<style>
input.ng-invalid {
background-color:pink;
}

input.ng-valid {
background-color:lightgreen;
}
</style>

<body ng-app="">
<p>Type into the input field:</p>
<form name="myForm">
  <input name="myName" ng-model="myName" required>
</form>
</body>
HTML: Form Validation Demo 4

In the example below, styles are added to the form itself for unmodified (pristine) form modified form:

<style>
form.ng-pristine {background-color:lightblue;}
form.ng-dirty {background-color:pink;}
</style>

<body ng-app="">
<form name="myForm">
  <p>Type into the input field:</p>
  <input name="myName" ng-model="myName" required>
</form>
</body>
HTML: Form Validation Demo 5

You can create a custom validation function by adding a new directive to an application and deal with the validation inside of a function with specified argument.
See example at w3schools.com