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>
    
    
    نویسنده : استخدام کار بازدید : 113 تاريخ : چهارشنبه 3 خرداد 1396 ساعت: 22:05
    برچسب‌ها :

    خبرنامه

    عضویت

    نام کاربري :
    رمز عبور :