[英]How to use ng-init to select a default value in a select box when the ng-model and the ng-options are referencing different objects
[英]Default select not working in ngoptions when model initialized 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>
如何避免下拉菜單中出現空的多余選擇?
我的級聯下拉列表的代碼是
<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表達式也不會再次運行。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.