Auto Complete dependency

Auto complete Control depends on another control

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20142.0/interop/angular/wijmo.angular.js"></script>
<div ng-app="myApp">
        <div ng-controller="appController">
            <wj-combo-box placeholder="Select Country..."
                              required="false"
                              is-editable="false"
                              items-source="Countries"
                              display-member-path="Name"                             
                              selected-index="SelectedCountryIndex"
                              selected-index-changed="CountryChanged(e)"
                              style=”width:200px;”>
            </wj-combo-box>
            <wj-auto-complete placeholder="Select City..."
                              required="false"
                              is-editable="false"
                              items-source="Cities"
                              display-member-path="Name">
            </wj-auto-complete>
        </div>
    </div>

JavaScript

var _COUNTRIES = [
            {
                Id: '1',
                Name: 'India',
                cities: [
                    { Name: 'New Delhi' },
                    { Name: 'Kanpur' },
                    { Name: 'Lucknow' }, 
                    { Name: 'Agra' },
                    { Name: 'Mathura' }]
            },
            {
                Id: '2',
                Name: 'Japan',
                cities: [
                    { Name: 'Tokyo' },
                    { Name: 'Osaka' },
                    { Name: 'Aichi' },
                    { Name: 'Kyoto' }
                ]
            }];
        var app = angular.module('myApp', ['wj']);
        app.controller('appController', function ($scope) {
            $scope.Cities = [];
            $scope.Countries = new wijmo.collections.CollectionView(_COUNTRIES);
            $scope.SelectedCountryIndex = 0;
            
            $scope.CountryChanged = function (e) {
                console.log($scope.SelectedCountryIndex);
                $scope.Cities = _COUNTRIES[$scope.SelectedCountryIndex].cities;
                console.log($scope.SelectedCountryIndex);
            }
        });