Description :
In this example the "name" is the model name and is bound to the textbox and span as ng-model="name". so that means as you type in the textbox, the same textbox text will be updated in the span element. By default, the value of name model is "Example" which is added like $scope.name = 'Example' Let's see the example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<label>Enter Text <input type="text" ng-model="name" /> </label>
<br />
<b>Binded data:</b> <span ng-bind="name">
</span>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.name = 'Example';
}]);
</script>
</body>
</html>
Description :
Let us understand "ng-bind" with the example of addition of two numbers, In this example, We are taking two variables val1 and val2 and assigning them 5 and 3 as $scope.val1 = 5; $scope.val2 = 3; We want to show addition of these numbers in span tag and here is how we use "Ng-bind" ng-bind="val1+val2"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<b>Sum:</b> <span ng-bind="val1+val2"></span>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.val1 = 5;
$scope.val2 = 3;
}]);
</script>
</body>
</html>
Description :
Lets try to understand Ng-bind with dynamic calculation, so we are going to add two number which will be input by user, taking two textbox and assigning them ng-model="val1" and ng-model="val2" and the default value of val1 and val2 is 0 as $scope.val1 = 0; $scope.val2 = 0; Also created one function "sum" which will be called on-change of textboxes so once user type in textbox sum, fuction gets called which will add the val1 and val2 and store in the $scope.result variable and this variable is bind with the span below the textboxes.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
value1: <input type="number" ng-model="val1" ng-change="sum()" />
value2: <input type="number" ng-model="val2" ng-change="sum()" />
<br />
<b>Sum:</b> <span ng-bind="result">
</span>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.val1 = 0;
$scope.val2 = 0;
$scope.sum = function () {
$scope.result = ($scope.val1 + $scope.val2);
}
}]);
</script>
</body>
</html>
Description :
In this example user.firstName is bind with the first textbox and user.lastName is bind with the second textbox. These variables are also bind with the span tag for print the full name. As you type in the firstname and lastname textbox the full user name will show in the span below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
First Name : <input type="text" ng-model="user.firstName" /><br />
Last Name: <input type="text" ng-model="user.LastName" />
<br />
<b>User Name</b> <span ng-bind="user.firstName"></span>,<span ng-bind="user.LastName"></span>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.user = {
firstName: "Abc",
LastName: "Xyz",
};
}]);
</script>
</body>
</html>
Description :
We have an array named flowersArray as $scope.flowersArray = ["Rose", "Sun Flower", "Merry Gold", "Lily", "Bluebell", "Bergamot", "Bellflower", "Begonia", "Aster"] and with the help of ng-repeat directive we bind this array to the span element which display the list of the flower names given in array. The output will be as: Sun Flower Merry Gold Lily Bluebell Bergamot Bellflower Begonia Aster
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="flower in flowersArray">
<span ng-bind="flower"></span>
<br />
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.flowersArray = ["Rose", "Sun Flower", "Merry Gold", "Lily", "Bluebell", "Bergamot", "Bellflower", "Begonia", "Aster"]
}]);
</script>
</body>
</html>
Description :
We have an array with some random numbers and with the help of ng-repeat directive we bind these numbers to the span element to display the list of the numbers.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="array in Array">
<span ng-bind="array"></span>
<br />
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.Array = [1, 2, 4, 5, 6, 8, 9, 0, 12, 43, 13, 54];
}]);
</script>
</body>
</html>
Description :
We have an array with some random numbers and we bind the 6th element like ng-bind="Array[5]" of the array i.e 600 to the span element, Thus the output is 600.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<span ng-bind="Array[5]"></span>
<br />
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.Array = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200];
}]);
</script>
</body>
</html>
Description :
In this example, we have an array named flowersArray with the names of flowers. We bind the 7th element ng-bind="flowersArray[6]" to the span tag and in the array element on the 7th position will be bind with this span tag.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<span ng-bind="flowersArray[6]"></span>
<br />
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.flowersArray = ["Rose", "Sun Flower", "Merry Gold", "Lily", "Bluebell", "Bergamot", "Bellflower", "Begonia", "Aster"]
}]);
</script>
</body>
</html>
Description :
In this example, we have an array named flowersArray with the flower name and price. We print the array of flowers using ng-repeat directive in the table form and bind the flower name and flower price with the td tag of table.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Flower Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="flower in flowersArray">
<td ng-bind="flower.name"></td>
<td ng-bind="flower.price"></td>
</tr>
</tbody>
</table>
<br />
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.flowersArray = [{ name: "Rose", price: 17 }, { name: "Sun Flower", price: 12 }, { name: "Merry Gold", price: 32 }, { name: "Lily", price: 45 }, { name: "Bluebell", price: 26 }, { name: "Bergamot", price: 33 }, { name: "Bellflower", price: 21 }, { name: "Begonia", price: 26 }, { name: "Aster", price: 34 }]
}]);
</script>
</body>
</html>
Description :
In this example we have an array of cities with thier name and code, we bind the cities array with the select list using the ng-options directive and as the user select any option from the select list the code of the city display below the select list as we bind the selected value with the span below it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController" ng-init="city.code='ON'">
<select ng-model="city.code" ng-options="city.code as city.description for city in cities"></select>
<br />
<span ng-bind="city.code"></span>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.cities = [
{ code: 'ON', description: 'Ontario' },
{ code: 'QC', description: 'Quebec' },
{ code: 'NS', description: 'Nova Scotia' },
{ code: 'NB', description: 'New Brunswick' },
{ code: 'MB', description: 'Manitoba' },
{ code: 'BC', description: 'British Columbia' },
{ code: 'PE', description: 'Prince Edward Island' },
{ code: 'SK', description: 'Saskatchewan' }
];
}]);
</script>
</body>
</html>