AngularJS Models

In the previous article we studied controller in detail. In this part, we shall study another important concept i.e. AngularJS Models. In simplest words, AngularJS allows you to bind the input of an html element to an application variable. This application variable can be created via ng-init or via $scope object inside the controller function. The ng-model directive binds the inner html of the element to AngularJS application variable. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 	<p>Car Name: <input type="text" ng-model="carname"></p>
 	<p ng-bind="carname"></p>
</div>

</body>
</html>

Download the code Try the code

Open the above page in a browser. It contains a text field and some text underneath. Start typing something in the text box. The same text shall appear below the text field. This happens because the “ng-model” binds the input of textbox to application variable “carname”. Similarly, AngularJS expression binds the value of this variable to inner html of the paragraph. Therefore, whenever you update the value in textbox, the value in paragraph also changes accordingly.

Input Validation via AngularJS Models

AngularJS models can also validate user inputs. For instance if you want to validate whether a user has entered valid email or not, you can do so via AngularJS models. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<form ng-app="" name="newform">
    Email:
    <input type="email" name="myemail" ng-model="text">
    <p ng-show="newform.myemail.$error.email">Please enter valid email </p>

</form>
        

</body>
</html>

Download the code Try the code

The above code contains a text box which accepts email. Until you enter correct email, the message “please enter correct email” will remain in display.

Another way to implement validations in via model is via css classes. For instance you may want that unless a user enters something in a textbox, the color of the text box should remain pink. As soon as the user enters some text, the color should change to default. This can be easily implemented via AngularJS models and css validation classes. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    
    <style>
    input.ng-invalid {
        background-color: pink;
    }
    </style>
    
</head>
    
<body>
    
    <form ng-app="" name="newForm">
        Enter your name:
        <input name="carname" ng-model="carText" required>
    </form>
</body>
</html>

Download the code Try the code

Open the above page in browser. You should see a text box with pink background by default. Enter something in the text box. It’s background color will change to default. Again empty the text box, the color of the text box will again change pink. This is because in styles we have set the color of the “ng-invalid” class for input elements to “pink”. Next, we have added required attribute to our text box. Therefore the input in the text box will remain invalid until it is empty. Therefore, the background color of the text box will remain pink. As soon as you enter something in the text box, the input will become valid. Therefore, “ng-invalid” class will be removed from the text box and is background color will change to default.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .