AngularJs+TypeScript：如何在 Angular Controller 中实现 if else 条件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31384530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs+TypeScript: How to implement if else condition in Angular Controller
提问by Shian JA
I am trying to implement a if else condition in angular controller.I have taken a dropdown and on its index change i am binding my another drop down.I have tried ng-if too but it will hide the whole dropdown where i want the dropdown visible .Here is my html code:-
我正在尝试在 angular 控制器中实现 if else 条件。我采用了一个下拉菜单，并在其索引更改时绑定了我的另一个下拉菜单。我也尝试过 ng-if，但它会隐藏整个下拉菜单，我想要下拉菜单可见。这是我的 html 代码：-
<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" ng-init="getFormData();">
<table style="width: 144% ! important;" class="TableStyle1" id="Table1" cellspacing="0" cellpadding="2" border="0">
<tr>
<td>Billing Type:</td>
<td>
<select id="listBillingType" ng-change="listBillingTypeselectedindexchange(custom.listBillingType)" data-ng-options="blngtype as blngtypee for (blngtype,blngtypee) in listBillingType" data-ng-model="custom.listBillingType" style="width: 182px !important; height: 34px;">
<option value="">Choose an option {{optional ? '(optional)' : ''}}</option>
</select>
</td>
</tr>
Another Dropdown which i am trying to populate on the basis of above dropdown index.
我试图根据上述下拉索引填充的另一个下拉列表。
<tr>
<td nowrap style="height: 26px">Parent Account:</td>
<td style="height: 26px">
<select id="listParentAccount" data-ng-options="prntact as prntact.AccountNumber +' - '+ prntact.FullName for prntact in listParentAccount" ng-model="custom.listParentAccount" style="width: 182px !important; height: 34px;">
<option value="">Choose an option {{optional ? '(optional)' : ''}}</option>
</select>
</td>
</tr>
Here is my Controller
这是我的控制器
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.listBillingTypeselectedindexchange = this.listBillingTypeselectedindexchange;
}
public listBillingTypeselectedindexchange = (index) = > {
debugger;
var indexvalue = {
BillingTypesindex: index
}
if (index === "3" || index === "4" || index === "5") this.$http.put(dolistsalesindex, indexvalue).
success((data, status, headers, config) = > {
debugger;
this.$scope.listParentAccount = data["listParentAccount"];
}).
error((data, status) = > {
debugger;
console.log("In Error:-in index");
alert(data);
});
}
}
Here i want if selected index value is 3,4,5 than only it will go to my api else will return blank.
在这里，我想如果选定的索引值是 3、4、5，那么它只会进入我的 api，否则将返回空白。
回答by Sudharsan S
try
尝试
<table style="width: 144% ! important;" class="TableStyle1" id="Table1" cellspacing="0" cellpadding="2" border="0">
<tr>
<td>Billing Type:</td>
<td ng-if="custom.listBillingType !== '1'"> // if condition
<select id="listBillingType" >
// your options
</select>
</td>
<td ng-if="custom.listBillingType === '1'"> // else condition
<select id="listBillingType" >
// your options
</select>
</td>
</tr>
回答by Shian JA
I have Solved this problem in the below manner or by makling chnage in my typescript or angular controller.But still have a confusion as how to rest a dropdwon on ng-change.
我已经通过以下方式或通过在我的打字稿或角度控制器中修改 chnage 解决了这个问题。但仍然对如何在 ng-change 上放置 dropdwon 感到困惑。
public listBillingTypeselectedindexchange = (index) => {
debugger;
var indexvalue = {
BillingTypesindex: index
}
if (index === "3" || index === "4" || index === "5") {
this.$http.put(dolistsalesindex, indexvalue).
success((data, status, headers, config) => {
debugger;
this.$scope.listParentAccount = data["listParentAccount"];
}).
error((data, status) => {
debugger;
console.log("In Error:-in index");
alert(data);
});
}
