Two way databinding in AngularJS
We have a two way data binding when a model variable is bound to a HTML element that can both change and display the value of the variable.
Next - Add ng-app in <body> tag - Next - Add Controller in <div> tag - ng-model bind to Textbox and changeable - Next - Add object value bind from conditions
We have a two way data binding when a model variable is bound to a HTML element that can both change and display the value of the variable.
We use the ng-model directive to bind a model variable to the HTML element that can not only display its value, but also change it.
DEMO
HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Two way databinding in AngularJS</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("blogmodul", []);
myapp.controller("blogcontroller", function ($scope) {
$scope.message = "dotnetdrizzles";
var blog = {
name: "Dotnetdrizzles",
domain: "blogspot.in",
provider : "Google"
}
$scope.blog = blog;
});
</script>
</head>
<body ng-app="blogmodul">
<form id="form1" runat="server">
<div align="center" ng-controller="blogcontroller">
<h1>Two way databinding in AngularJS</h1>
<asp:TextBox ID="TextBox1" ng-model="message" runat="server"></asp:TextBox>
{{message}} <br />
NAME:
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="{{blog.name}}"></asp:Label><br />
DOMAIN:
<asp:Label ID="Label2" runat="server" ForeColor="Red" Text="{{blog.domain}}"></asp:Label><br />
PROVIDER: <asp:Label ID="Label3" runat="server" ForeColor="Red" Text="{{blog.provider}}"></asp:Label><br />
</div>
</form>
</body>
</html>
Add new web form -Add- Anjular.js plugins - create model and controller with some conditions below
Next - Add ng-app in <body> tag - Next - Add Controller in <div> tag - ng-model bind to Textbox and changeable - Next - Add object value bind from conditions
.gif)
0 comments:
Post a Comment