pTutorial

New way to learn Programming

AngularJS Forms

AngularJS provides the feature to bind the HTML form data or input fields to the model object. You can use these feature to bind the form data to model. Bind text field using ng-model

AngularJS Text field

You can simply bind text field using ng-model as shown following below-

<!DOCTYPE html> 
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Enetr Name : <input type="text" ng-model="name"></p>
    <p style="color:red";>Hello {{name}}
</div>
</body>
</html> 

AngularJS Binding Radio Buttons

You can easily bind radio buttons just like text boxes. If you are using group of radio button use same ng-model name.

<!DOCTYPE html> 
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Select gender</p>
<form>
Male: <input type="radio" ng-model="myForm.gen" value="Male"><br/>    
Female: <input type="radio" ng-model="myForm.gen" value="Female">    
</form>
You are
<p style="color:blue";> {{myForm.gen}}

</div>
</body>
</html> 

Binding Select Boxes

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.3.14/angular.min.js"></script>
</head>
  <body ng-app="app">
    <div ng-controller="Test">
       Select Name: <select ng-model="name">
        <option ng-repeat="item in items" value="{{item}}">{{item}}</option>
      </select>
     <p>Selected Name is : {{name}}</p>
 
 </div>
	<script>
	var app = angular.module('app',[]);
app.controller('Test',function($scope){
   $scope.items = ['umar','khan','farooque','sonu','singh']
});
	</script>
  </body>
</html>

See Also


QUOTES OF THE DAY

Each day provides its own gifts.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER