主要功能是实现级联菜单,当一级菜单中选中除“请选择”的值时,二级菜单能够正确显示,但是当一级菜单选中“请选择”时,二级菜单会保留上次显示的内容,不会按照预想的置空。此时使用console打印的时候twos已经为空了,下拉框却没更新,百度了说要用$apply,不过用了报错,所以想请教下正确的解法,谢谢大家。
HTML代码
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-4">一级菜单</label>
<div class="col-md-8">
<select name="onemenu" class="form-control selectpicker" ng-model="one" ng-change="test(one)">
<option value="">请选择</option>
<option ng-repeat="one in ones" value="{{one.id}}" on-finish-render>
{{one.name}}
</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-4">二级菜单</label>
<div class="col-md-8">
<select name="twomenu" class="form-control selectpicker" ng-model="two">
<option value="">请选择</option>
<option ng-repeat="two in twos" value="{{two.id}}" on-finish-render>
{{two.id}}
</option>
</select>
</div>
</div>
</div>
Js代码
$scope.twos = new Array();
$scope.test = function (data) {
if(data != ""){
//根据一级菜单获取二级菜单要显示的值
$scope.twos = oneMap[data];
} else {
//将二级菜单置空
$scope.twos = [];
}
}
one是ones遍历出来的对象 你写在外面怎么能拿到。
select标签用ng-options就行了 不用去option再ng-repeat。
用ng-options
改成这样 再看ng-change,应该可以拿到你选的对象了。