CODEWITHSUNDEEP
angularjstypescriptangular-ng-if
Shian JA
Shian JA

Reputation: 814

AngularJs+TypeScript: How to implement if else condition in Angular Controller

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

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

Upvotes: 1

Views: 12239

Answers (2)

Shian JA
Shian JA

Reputation: 814

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.

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

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

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>

Upvotes: 2

Related Questions