AngularJs+TypeScript:-How to get the selected index value in ng-select

Question

I m working on module where I have check a condition for the visibility of a panel as if slected index of a dropdown is not equal to 0 or -1 than it will make visible to my panel else it will not. I am bit confused as how to get the selected index value of my dropdown using ng-select. I have shown my dropdown code below:-

 <div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom"  ng-init= getFormData(); >
<table>
<tr>
     <td>                                             
     <select id="accountselector" style="width: 100%;">
     <option value="0">--- Select an option ---</option>
    <option data-ng-repeat="acnt in listAccountTypes" value="{{acnt.id}}">{{acnt}}</option>
    </select>
    </td></tr>
</table>
</div>

Here is my typescript controller

/// <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'];
        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
            $scope.getFormData = this.getFormData;
        }
           public getFormData = (getFormData: any) => {
            this.$http.get(doAccountTypeUrl).
                success((data, status, headers, config) => {
                this.$scope.listAccountTypes = data["AccountCodesDisplayTypes"];
            }).
                error((data, status) => {
                debugger;
                console.log("In Error:-Request Failed");
                alert(status);
            });
        }  
    }
    var customerapp = angular.module("CustomerNew", []);
    customerapp
      .controller('CreateCustomerCtrl', CustomerNew.controllers.CreateCustomerCtrl);
    var doAccountTypeUrl = '/API/Create/GetLoadData';
}
</Controller>

Condition Which i have to check:

if (listAccountTypes.SelectedIndex > -1 && listAccountTypes.SelectedValue != "0")
 {
 IntlCountryAddres objIntlCountryAddres = objIntlCountryAddressController.GetByCountryId(Convert.ToInt32(listAccountTypes.SelectedValue));
 if (objIntlCountryAddres != null && objIntlCountryAddres.id > 0)
    {
       pnlBillingCountry.Visible = true;
       LoadBillingInfo(objIntlCountryAddres);
    }
     }
 else
    {
      pnlBillingCountry.Visible = false;
    }

Note:-I am checking this condition on page load I am getting data in below format:- enter image description here

score 1 · Accepted Answer · answered Jul 08 '15 at 09:15

1

Don't have the option inline:

<select id="accountselector" style="width: 100%;">
 <option value="0">--- Select an option ---</option>

Instead use ng-options and ng-model:

<select id="accountselector" style="width: 100%;" ng-options="check docs" ng-model="check docs"></select>

Check the docs : https://docs.angularjs.org/api/ng/directive/ngOptions

answered Jul 08 '15 at 09:15

basarat

261,912
58
460
511

but is there any specific reason for not to use ng-select instead of ng-options? – Shian JA Jul 08 '15 at 10:36
have tried the same by making changes as :- But drop down is not able to bind – Shian JA Jul 08 '15 at 10:55
You can check image as well where you can see in which form i am getting data. – Shian JA Jul 08 '15 at 11:03

score 1 · Answer 2 · edited May 23 '17 at 10:26

I updated one of our plunkers with the above code (original from here). Firstly, this would be our returned data file - API/Create/GetLoadData.json:

{
  "AccountCodesDisplayTypes" : 
  {
      "1": "Code Only",
      "2": "Code and Description",
      "3": "Description Only",
      "N": "no"
  }
}

And here is a bit adjusted controller (to use above json and consume existing module via getter)

module CustomerNew.controllers {
    export class CreateCustomerCtrl {

        static $inject = ['$scope', '$http', '$templateCache'];

        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
            $scope.getFormData = this.getFormData;
        }
           public getFormData = (getFormData: any) => {

            this.$http
                .get(doAccountTypeUrl)
                .success((data, status, headers, config) => {
                this.$scope.listAccountTypes = data["AccountCodesDisplayTypes"];
            }).
                error((data, status) => {
                debugger;
                console.log("In Error:-Request Failed");
                alert(status);
            });
        }  
    }
    //var customerapp = angular.module("CustomerNew", []); 
    var customerapp = angular.module("CustomerNew"); 
    customerapp
      .controller('CreateCustomerCtrl', CustomerNew.controllers.CreateCustomerCtrl);
    var doAccountTypeUrl = 'API/Create/GetLoadData.json';
}

The reason for using module getter is - that the CustomerNew module is defined elsewhere... as a part of main module.

Finally this is a bit adjusted HTML snippet:

<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" ng-init=getFormData();>
    <table> 
      <tr>
        <td>
          <select id="accountselector" style="width: 100%;">
            <option value="0">--- Select an option ---</option>
            <option data-ng-repeat="(key, value) in listAccountTypes" value="{{key}}">{{key}} - {{value}}</option>
          </select>
        </td>
      </tr>
    </table>
</div>

Mostly we use key, value to consume our json (I tried to use the same as in the error message above)

Check it here

thanx for your reply @Radim but how do i get selected index of the selected value in dropdown? — Shian JA, Jul 08 '15 at 13:02
I added more details, and create more plunkers... check it here http://stackoverflow.com/a/31295007/1679310... hope it helps — Radim Köhler, Jul 08 '15 at 14:01

score 1 · Answer 3 · edited May 23 '17 at 10:26

So, having working ng-repeat and select/option as described here.

Firstly we will extend our $scope with a Model = {} object:

constructor(protected $scope: ICustomerScope,
    protected $http: ng.IHttpService,
    protected $templateCache: ng.ITemplateCacheService) {
    $scope.getFormData = this.getFormData;

    $scope.Model = { selectedValue : "0" };
}

we can change the html snippet like this, to get selected "key" in our model called selectedValue (here is the updated plunker):

<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" 
      ng-init="getFormData();">
    <table> 
      <tr>
        <td>
          <select id="accountselector" style="width: 100%;" ng-model="Model.selectedValue">
            <option value="0" >--- Select an option ---</option>
            <option data-ng-repeat="(key, value) in listAccountTypes" 
                    value="{{key}}">{{key}} - {{value}}</option>
          </select>
        </td>
      </tr>
    </table>
    Selected value: {{Model.selectedValue}}
</div>

The most important change is introduction of the ng-model

...<select id="accountselector" style="width: 100%;" ng-model="selectedValue">

Check it here

In case, that we would like to know the INDEX of selected value, we can use angular built in counter $index, check it here in this fork, this would be the adjusted part:

<select id="accountselector" style="width: 100%;" ng-model="Model.selectedValue">
    <option value="0" >--- Select an option ---</option>
    <option data-ng-repeat="(key, value) in listAccountTypes" 
            value="{{$index + 1}}">{{key}} - {{value}}</option>
</select>

Radim if we make changes in ng-model so will it bind on ng-click as well because for ng-click i m using custom.accountselector and in above you have used different one so it fine for that? — Shian JA, Jul 08 '15 at 14:33
accountselector could be used as well but I strongly suggest to use some `Model {accountselector: 0}`. This is almost must... because we need to share reference... — Radim Köhler, Jul 08 '15 at 14:35
Please, read this... why we need dot (there are links for more details) http://stackoverflow.com/a/21882900/1679310 — Radim Köhler, Jul 08 '15 at 14:36
k but can i use the same model value in saving data function as well .Because previously i m doing like : AccountType: create.listAccountTypes, But now can i do it as AccountType: model.SelectedValue,? — Shian JA, Jul 08 '15 at 14:41

AngularJs+TypeScript:-How to get the selected index value in ng-select

3 Answers3

Linked