我有一个基于第一个下拉选择的带有第二个下拉菜单的级联选择。出现一个额外的空白选项,这不是下拉菜单预期行为的一部分。
<select ng-init="order.attempt_status_sub = order.attempt_status_sub || subStatuses[0].name"
data-ng-model="order.attempt_status_sub" ng-options="subStatus.name as
subStatus.name for subStatus in subStatuses">
</select>
如何避免下拉菜单中出现空的多余选择?
我的级联下拉列表的代码是
<div class="form-group" ng-class="{ 'has-error' : submitted && orderForm.content.$invalid}">
<div class="controls">
<select ng-change="getSubStatuses(order.attempt_status)" data-ng-model="order.attempt_status" ng-options="status.name as status.name for status in statuses">
</select>
</div>
</div>
<div class="form-group" ng-show="subStatuses.length" ng-class="{ 'has-error' : submitted && orderForm.content.$invalid}">
<div class="controls">
<select ng-init="order.attempt_status_sub = order.attempt_status_sub || subStatuses[0].name" data-ng-model="order.attempt_status_sub" ng-options="subStatus.name as subStatus.name for subStatus in subStatuses">
</select>
</div>
</div>
$scope.getSubStatuses = function(attempt_status) {
var statuses = $scope.statuses;
for(var index in statuses) {
if(statuses[index].name === attempt_status) {
if(statuses[index].children) {
$scope.subStatuses = statuses[index].children;
} else {
$scope.subStatuses = [];
}
break;
}
}
};
最佳答案
我假设您正在为异步绑定的数据设置它。 ng-init
对于此目的确实很不好。拇指法则是不要将ng-init
用于控制器应该执行的操作。您应该在控制器中设置视图模型。当异步绑定数据时,它可能失败的原因是因为未监视ng-inited表达式。因此,它在第一次渲染期间仅运行一次,并且subStatuses
尚未填充,并且回退到显示默认的空选项。并且即使在稍后的摘要周期中填充了数据并更新了视图,ng-init表达式也不会再次运行。
From Doc
ngInit的唯一适当用法是为ngRepeat的特殊属性添加别名,如下面的演示所示。除了这种情况,您应该使用控制器而不是ngInit来初始化作用域上的值。
因此,只需在您的控制器中对其进行初始化,而不是使用ng-init。
$scope.getSubStatuses = function(attempt_status) {
var statuses = $scope.statuses;
for(var index in statuses) {
if(statuses[index].name === attempt_status) {
if(statuses[index].children) {
$scope.subStatuses = statuses[index].children;
} else {
$scope.subStatuses = [];
}
break;
}
}
//Initialize the model here, assuming $scope.order is already initialized
$scope.order.attempt_status_sub = ($scope.subStatuses[0] ||{}).name;
};
angular.module('app', []).controller('ctrl', function($scope, $timeout) {
$timeout(function() {
$scope.subStatuses = [{
name: 'test1'
}, {
name: 'test2'
}, {
name: 'test3'
}];
$scope.order = {
attempt_status_sub1: $scope.subStatuses[0].name
};
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
With Ng-Init
<select ng-init="order.attempt_status_sub = order.attempt_status_sub || subStatuses[0].name" data-ng-model="order.attempt_status_sub" ng-options="subStatus.name as
subStatus.name for subStatus in subStatuses">
</select>
With controller initialization.
<select data-ng-model="order.attempt_status_sub1" ng-options="subStatus.name as
subStatus.name for subStatus in subStatuses">
</select>
</div>