Selectbox

Bind select boxes to your application with the ng-model directive, which will store the value of the selected option in the specified property.

Example

Show some text depending on the value of the selected option.

<form>
Select a topic:
  <select ng-model=”myVar”>
    <option value=””>
    <option value=”dogs”>Dogs
    <option value=”tuts”>Tutorials
    <option value=”cars”>Cars
  </select>
</form>

The value of myVar will be one of the following: “dogs,” “tuts,” or “cars.”

An AngularJS Form Example

First Name:

John

Last Name:

Doe

form = {“firstName”: “John”, “lastName”: “Doe”}

master = {“firstName”: “John”, “lastName”: “Doe”}

Application Code

<div ng-app=”myApp” ng-controller=”formCtrl”>
  <form novalidate>
    First Name:<br>
    <input type=”text” ng-model=”user.firstName”><br>
    Last Name:<br>
    <input type=”text” ng-model=”user.lastName”>
    <br><br>
    <button ng-click=”reset()”>RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module(‘myApp’, []);
app.controller(‘formCtrl’, function($scope) {
  $scope.master = {firstName: “John”, lastName: “Doe”};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };
  $scope.reset();
});
</script>

Example Explained

The ng-app directive initializes the AngularJS application, while the ng-controller directive designates the controller. The ng-model directive connects two input elements to the user object in the model. The formCtrl controller sets initial values for the master object and defines the reset() method, which assigns the user object to the master object. The ng-click directive triggers the reset() method when the button is clicked. Although the novalidate attribute isn’t necessary for this application, it is commonly used in AngularJS forms to disable standard HTML5 validation.