AngularJs+TypeScript:- 如何将变量的值分配给文本字段
AngularJs+TypeScript:- How to assign the value of a variable to textfield
我拿了两个 div 一个是左对齐的,第二个是 right.In 两个 div 我有一个 textbox.I 给了一个 ng-href 我在上面试图将左 div 的数据复制到右 div 但它不会在 way.It 不做任何事情。
这是我的 HTML 代码:-
<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>
赋值:-
/// <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);
}
我的界面
module CustomerNew {
export interface ICustomerScope extends ng.IScope {
ButtonCopy: (FirstName) => void;
}
}
我也尝试过 Dean Ward 建议的不同方法,但出现了新问题
更新错误 2
![在此处输入图片描述][2]
您正在使用 controllerAs 语法。在那种情况下,你不应该使用 scope:
public ButtonCopy = (FirstName) => {
this.txtFirstNameBilling = FirstName;
}
并且您应该使用 custom
前缀指定 ng-click
:
<a ng-href="" Width="147px" style="cursor:pointer;" TabIndex="12"
ng-click="custom.ButtonCopy(custom.txtFirstName)">复制联系信息
示例片段:
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>
您随后的 TypeScript 问题与用于控制器的 class 上的未定义字段有关。在这种情况下,如下更改 class 定义将修复它:
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;
}
}
我拿了两个 div 一个是左对齐的,第二个是 right.In 两个 div 我有一个 textbox.I 给了一个 ng-href 我在上面试图将左 div 的数据复制到右 div 但它不会在 way.It 不做任何事情。 这是我的 HTML 代码:-
<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>
赋值:-
/// <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);
}
我的界面
module CustomerNew {
export interface ICustomerScope extends ng.IScope {
ButtonCopy: (FirstName) => void;
}
}
我也尝试过 Dean Ward 建议的不同方法,但出现了新问题
![在此处输入图片描述][2]
您正在使用 controllerAs 语法。在那种情况下,你不应该使用 scope:
public ButtonCopy = (FirstName) => {
this.txtFirstNameBilling = FirstName;
}
并且您应该使用 custom
前缀指定 ng-click
:
<a ng-href="" Width="147px" style="cursor:pointer;" TabIndex="12"
ng-click="custom.ButtonCopy(custom.txtFirstName)">复制联系信息
示例片段:
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>
您随后的 TypeScript 问题与用于控制器的 class 上的未定义字段有关。在这种情况下,如下更改 class 定义将修复它:
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;
}
}