AngularJs+TypeScript：如何在 Angular 控制器中实现 if else 条件答案

【问题标题】：AngularJs+TypeScript: How to implement if else condition in Angular ControllerAngularJs+TypeScript：如何在 Angular 控制器中实现 if else 条件
【发布时间】：2015-07-13 13:19:54
【问题描述】：

我正在尝试在角度控制器中实现 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>

我正在尝试根据上述下拉索引填充另一个下拉列表。

<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>

这是我的控制器

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);
            });
        }
    }

如果选择的索引值是 3,4,5，我希望它会转到我的 api，否则将返回空白。

【问题讨论】：

你把ng-if放在哪个地方？

标签： angularjs typescript angular-ng-if

【解决方案1】：

试试

<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>

【讨论】：

【解决方案2】：

我已经通过以下方式或通过在我的打字稿或角度控制器中修改 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);
                 });
             }

【讨论】：