API Controls API Controls - 1 month ago 15
AngularJS Question

ng-change not working angularjs

i am creating a web app in which i have two dropdownlist, i want to change data of dropdownlist 2 on dropdownlist 1 change

<tr>
<td>
state
</td>
<td>
<select ng-change="gcity()" ng-init="state = 'state'" ng-model="state">
<option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
</select>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<select ng-init="city = 'select'" ng-model="city">
<option ng-repeat="o in city" value="city">{{o.city}}</option>
</select>
</td>
</tr>


this is my dropdown if i select a particular state the city should be populated as per my state

but it is not working and even in console not showing any data,

then i tried ng-click

<tr>
<td>
state
</td>
<td>
<select ng-click="gcity()" ng-init="state='state'" ng-model="state">
<option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
</select>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<select ng-init="city='select'" ng-model="city">
<option ng-repeat="o in city" value="city">{{o.city}}</option>
</select>
</td>
</tr>


ng-click works fine but i want to use ng-change which is not working, any idea?

Answer

I suggest use a different json array as below. Only difference is state is an array of state objects and not a state to cities key, value pair. when a state is selected the ng-model is state object with name and cities. You can only submit the state name and not the cities list, which can be done during submission. with this both selects use the array option for ngOptions select.

JS

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.data = {
        "states": [{
            "name": "Maharashtra",
            "cities": ["Pune", "Mumbai", "Nagpur"]
        }, {
            "name": "Gujarat",
            "cities": ["Surat", "Ahmedabad", "Baroda"]
        }, {
            "name": "Rajasthan",
            "cities": ["Jaipur", "Ajmer", "Jodhpur"]
        }]
    }
});

HTML

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <table>
        <tr>
            <td>
                state
            </td>
            <td>
                <select ng-model="state" ng-options="state.name for state in data.states">
          <option value=''>Select</option>
          </select>
            </td>
        </tr>
        <tr>
            <td>
                City
            </td>
            <td>
                <select ng-disabled="!state" ng-model="city" ng-options="city for city in state.cities">
            <option value=''>Select</option>
        </select>
            </td>
        </tr>
    </table>
</body>

</html>

Plunkr: http://plnkr.co/edit/mtMdbUveeJKMRqmpvHyI?p=preview

Comments