CODEWITHSUNDEEP
angularjs
Vishnu Shanmughan
Vishnu Shanmughan

Reputation: 101

Autocomplete using AngularJS from multidimensional array

I am using bootstrap-ui for angular js for auto complete ,my first auto complete text box is getting value from a multidimensional json array, for this i am using following code in my controller 

'angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function ($scope, $http) {

    $scope.selected = undefined;
    $scope.Country = [
 { "name": "United Kingdom", "code": "1" },
{ "name": "United States", "code": "2" },
{ "name": "United States Minor Outlying Islands", "code": "3" }
 ];

});'

html code 

<html ng-app="ui.bootstrap.demo">
         <div class='container-fluid' ng-controller="TypeaheadCtrl">
                <h4>Country</h4>
                <pre>{{selected.name | json}}</pre>
                <input type="text" ng-model="selected" placeholder ="Select Country" typeahead="Country as Country.name for Country in Country | filter:$viewValue | limitTo:8" class="form-control">
                <h4>State in {{selected.name }}</h4>
        </html>

and my question is , how can i bind value(s) to another auto complete text box which use the following array 

 $scope.States = {
        1:[ 'LiverPool',"Manchester","Totenham","Birmingham" ],
        2:['Arizona','Colorado','Florida','New york']
  };

html code

<input type="text" ng-model="asyncSelected" placeholder="Select State" typeahead="state as state.code for state in States | filter:$viewValue | limitTo:8" typeahead-loading="loadingLocations" class="form-control">

using the Code number or name from the previous text box

Upvotes: 1

Views: 1748

Answers (1)

Suyash Patel
Suyash Patel

Reputation: 190

You can do something like this.

<input type="text" ng-model="selectedNumber" ng-disabled="!customSelected" typeahead="state for state in numbers[customSelected.code] | filter:$viewValue" class="form-control"> Here is a plnkr.

Upvotes: 2

Related Questions