خرید بک لینک

درباره سایت

back soft

آخرین مطالب

امکانات وب

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>

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

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه