How to get value from a directive input field using angular

ساخت وبلاگ

I am new to angular.js. I have two directives in my main.js file and every directive has an input text field in the template. There is a Html page (index.html) where I want to use these directive's text fields with another input text field which is a Html input text field.

Now I want whatever input user gives in both the directive's text fields the character count should be calculated and the sum should be printed in the third text field which is a Html text field.

Code is given below:-

**Main.js file code :** /// <reference path="angular.min.js" /> var app = angular.module("myApp", []); app.directive("textbox1"
, function() { return { restrict: 'E', scope: { timezone : "@" }, template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval1' ng-change='updateval()'/>{{txtval1.length}} </div>" } }
);
app.directive("textbox2", function() { return { restrict: 'E', scope: { timezone: "@" }, template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval2' ng-change='updateval()'/>{{txtval2.length}} </div>" } }
);
app.controller("myCtrl", function ($scope) { $scope.updateval = function () { console.log($scope.txtval1.value); $scope.txtThird = ($scope.txtval1.length) + ($scope.txtval2.length); }
});
**HTML Page Code :**
<!DOCTYPE html>
<html>
<head> <title></title> <meta charset="utf-8" />
</head>
<body>
<div ng-app="myApp"> <textbox1></textbox1> <textbox2></textbox2> <br/><br/> <input type="text" ng-model="txtThird"/>
</div>
<script src="scripts/angular.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
back soft...
ما را در سایت back soft دنبال می کنید

برچسب : نویسنده : استخدام کار backsoft بازدید : 452 تاريخ : چهارشنبه 3 خرداد 1396 ساعت: 22:05