Autocomplete using AngularJS from multidimensional array

Question

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

Can't you just access the array like this: States[selected.code] ? So the HTML would look like this: <input type="text" ng-model="asyncSelected" placeholder="Select State" typeahead="state as state for state in States[selected.code] | filter:$viewValue | limitTo:8" typeahead-loading="loadingLocations" class="form-control"> — Betty St
– Betty St, Commented Nov 7, 2014 at 21:27

Suyash Patel · Accepted Answer · 2014-11-08 19:51:49Z

2

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.

answered Nov 8, 2014 at 19:51

Suyash Patel

1901 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Autocomplete using AngularJS from multidimensional array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related