angularjsangularjs-scopetypescripttypescript1.4typescript1.5

AngularJs+TypeScript:- How to assign the value of a variable to textfield


I have taken two div one is left aligned and second is right.In both div i am having a textbox.I gave a ng-href on which i am trying to copy the data of left div to right div but it's not going in that way.It doesn't do anything. Here is my HTML Code:-

<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" data-ng-init="getFormData();data();">
    <div id="div1" align="left">
    <tr>
     <td style="width: 200px">First Name:</td>
    <td>
    <asp:TextBox ID="txtFirstName" TabIndex="1" runat="server" CssClass="NormalTextBox"Width="160px" Height="10px" Name="txtFirstName" ng-model="custom.txtFirstName"></asp:TextBox>
    </td>
    </tr>
    </div>

<div id="Div2" align="Right">
<tr>
<td colspan="2" width="100">
<a ng-href="" Width="147px" style="cursor:pointer;" TabIndex="12" 
ng-click="ButtonCopy(custom.txtFirstName)">Copy Contact Info</a>
</td>
</tr>
 <tr>
<td style="width: 200px">First Name:</td>
<td>
<asp:TextBox ID="txtFirstNameBilling" TabIndex="12" runat="server" CssClass="NormalTextBox"Width="160px" Height="10px" ng-model="custom.txtFirstNameBilling"></asp:TextBox>
</td>
</tr>
</div>

Assignment OF Values:-

    /// <reference path="../interface/interface.ts" />
    /// <reference path="../../scripts/typings/jquery/jquery.d.ts" />
    /// <reference path="../../scripts/typings/angularjs/angular.d.ts" />

    module CustomerNew.controllers {
        export class CreateCustomerCtrl {
            static $inject = ['$scope', '$http', '$templateCache'];
            debugger;
            constructor(protected $scope: ICustomerScope,
                protected $http: ng.IHttpService,
                protected $templateCache: ng.ITemplateCacheService) {
                $scope.ButtonCopy = this.ButtonCopy;
            }
     public ButtonCopy = (FirstName) => {
this.$scope.txtFirstNameBilling = FirstName;
            }
            //end
        }
        var customerapp = angular.module("CustomerNew", []);
        customerapp.controller('CreateCustomerCtrl', CustomerNew.controllers.CreateCustomerCtrl);
    }

My Interface

module CustomerNew {
    export interface ICustomerScope extends ng.IScope {
        ButtonCopy: (FirstName) => void;
    }
}

I have tried in the different way as suggested by Dean Ward too but new problem occurs

Error Image Updated error2

![enter image description here][2]


Solution

  • You're using the controllerAs syntax. In that case you shouldn't be using scope:

    public ButtonCopy = (FirstName) => {
        this.txtFirstNameBilling = FirstName;
    }
    

    and you should be specifying your ng-click with the custom prefix:

    <a ng-href="" Width="147px" style="cursor:pointer;" TabIndex="12" 
    

    ng-click="custom.ButtonCopy(custom.txtFirstName)">Copy Contact Info

    Example snippet:

    var customerapp = angular.module("CustomerNew", []);
    customerapp.controller('CreateCustomerCtrl', [
      "$scope", "$http", "$templateCache", 
      function($scope, $http, $templateCache) {
        this.ButtonCopy = function(FirstName) {
          console.log("Boom");
          this.txtFirstNameBilling = FirstName;
        }
      }
    ]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom">
        <div id="div1" align="left">
        <tr>
         <td style="width: 200px">First Name:</td>
        <td>
        <input ng-model="custom.txtFirstName" />
        </td>
        </tr>
        </div>
    <div id="Div2" align="Right">
    <tr>
    <td colspan="2" width="100">
      <button ng-click="custom.ButtonCopy(custom.txtFirstName)">Copy Contact Info</button>
    </td>
    </tr>
     <tr>
    <td style="width: 200px">First Name:</td>
    <td>
    <input ng-model="custom.txtFirstNameBilling">
    </td>
    </tr>
    </div>

    Your subsequent TypeScript issues are related to undefined fields on the class used for the controller. In this case changing the class definition as follows will fix it:

    export class CreateCustomerCtrl {
        static $inject = ['$http', '$templateCache'];
            constructor(
                protected $http: ng.IHttpService,
                protected $templateCache: ng.ITemplateCacheService) {
            }
    
            public txtFirstNameBilling: string;
            public txtFirstName: string;
            public ButtonCopy = (FirstName) => {
                this.txtFirstNameBilling = FirstName;
            }
        }