AngularJs + TypeScript:如何在Angular Controller中实现if else条件

时间:2015-07-13 13:19:55

标签: angularjs typescript angular-ng-if

我正在尝试在角度控制器中实现一个if else条件。我已经采用了一个下拉列表并对其索引更改我正在绑定我的另一个下拉。我已经尝试了ng - 如果它也会隐藏整个下拉列表我在哪里希望下拉列表可见。这是我的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,否则将返回空白。

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

我已经通过以下方式解决了这个问题,或者通过我的打字稿或角度控制器中的chnage来解决这个问题。但是如何在ng-change上休息一下就会产生混乱。

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