1、HTML代码如下:
<!-- 这个是街道 -->
<select name="jd" ng-model="wgy.jd" class="form-control input-sm" ng-options="jd.code as jd.label for jd in bmOfJd" ng-change="getSqBm(wgy.jd)">
<option value="">--请选择--</option>
</select>
<!-- 这个是社区 -->
<select name="sq" ng-model="wgy.sq" class="form-control input-sm" ng-options="sq.code as sq.label for sq in bmOfSq">
<option value="">--请选择--</option>
</select>
2、JS代码如下:
//如果选择街道,去取出社区
$scope.getSqBm = function(jd){
BmService.getXzqh(jd)
.then(function(data){
$scope.bmOfSq = data;
});
};
3、问题:因为我这个在新增页和查询页公用,所以当编辑页的时候,我给街道wgy.jd赋值,但是这样是不会触发街道ng-change的,我怎样才能触发ng-change呢?
http://stackoverflow.com/questions/14386570/getting-the-ng-object-selected-with-ng-change
最好还是用 watch 做吧 用观察数据的变动触发某个方法来做
HTML
<select ng-model="wgy.jd"
ng-change="getSqBm()">
<option value="">--请选择--</option>
<option ng-repeat="jd in jds" value="{{jd.id}}">{{jd.name}}</option>
</select>
<select ng-model="wgy.sq">
<option value="">--请选择--</option>
<option ng-repeat="sq in sqs" value="{{sq.id}}">{{sq.name}}</option>
</select>
SCRIPT
angular.module('myApp', [])
.controller('MyCtrl', function ($scope) {
$scope.wgy = {
jd: '',
sq: ''
}
$scope.jds = [
{
id: 1,
name: '街道1',
sq: [
{
id: 1,
name: '街道1-社区1'
},
{
id: 2,
name: '街道1-社区2'
}
]
},
{
id: 2,
name: '街道2',
sq: [
{
id: 1,
name: '街道2-社区1'
},
{
id: 2,
name: '街道2-社区2'
}
]
}
];
$scope.sqs = [];
$scope.getSqBm = function(){
if(!$scope.wgy.jd){
$scope.sqs = [];
return ;
}
$scope.sqs = $scope.jds.filter(function(jd){
return jd.id == $scope.wgy.jd;
})[0].sq;
}
});
谢谢各位的回答,我找到方法了
就是给wgy.jd赋值后要手动调用ng-change的方法getSqBm($scope.wgy.jd),
这样他就会触发街道的ng-change了!!!
这里有详细说明