我正在创建一个web应用程序,其中我有两个下拉列表,我想在下拉列表1更改下拉列表2的数据
<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>
这是我的下拉菜单如果我选择了一个特定的州那么这个城市应该按照我的州来填充
但是它不工作,甚至在控制台也没有显示任何数据,
然后我试了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工作得很好,但我想使用ng-change,这是不工作,任何想法?
我想你在所有选项中都有相同的值
value="state"
试
<option ng-repeat="o in statefunc" value="{{o.state}}">{{o.state}}</option>
的例子:
http://plnkr.co/edit/aVp4d1JcYWUCdvLYiNb3?p =预览
我建议使用不同的json数组如下。唯一的区别是state是一个状态对象数组,而不是一个状态到城市的键值对。当一个州被选中时,ng-model是带有名称和城市的状态对象。您只能提交州名而不能提交城市列表,这可以在提交期间完成。在这里,两个选择都使用数组选项来进行ngOptions的选择。
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"]
}]
}
});