对于工作中的项目，我必须使用＆＃34; bs-tabs＆＃34; ＆＃34; Angular-Strap＆＃34;中的指令。
实施页面中有两个面板。在第一个面板中，您可以选择一个客户。每次选择客户后，底部面板中的第二个选择框（地址选择）应使用作为客户主要住所的地址进行更新。问题是activeCustomer模型不会更新，activeAddress也不会更新。
我尝试通过在javascript中更新模型来解决这个问题。当您第一次选择客户但是在地址选择＆＃34;中更改地址时，此方法会更新第二个模型。选择框有一个错误。 如果您再次更改客户，则第二个面板不再更新。您可以在我的jsfiddle示例here中找到两种解释的情况。
var app = angular.module("myApp", ['mgcrea.ngStrap']);
app.controller('agencyCtrl', ['$scope', function($scope) {
$scope.activeOffice = null;
$scope.activeCustomer = null;
$scope.activeCustomer2 = null;
$scope.activeAddress = null;
$scope.activeAddress2 = null;
$scope.setAddress = function() {
if ($scope.activeCustomer !== null) {
$scope.activeCustomer.addresses.forEach(function(address) {
if ($scope.activeCustomer.main_residence_id === address.address_id) {
$scope.activeAddress = address;
}
});
}
};
$scope.setAddress2 = function() {
//debugger;
$scope.activeCustomer2 = this.aCtrl.customerForm2.customerSelect2.$modelValue;
if ($scope.activeCustomer2 !== null) {
$scope.activeCustomer2.addresses.forEach(function(address) {
if ($scope.activeCustomer2.main_residence_id === address.address_id) {
$scope.activeAddress2 = address;
}
});
}
};
$scope.setAddress3 = function() {
if ($scope.activeCustomer3 !== null) {
$scope.activeCustomer3.addresses.forEach(function(address) {
if ($scope.activeCustomer3.main_residence_id === address.address_id) {
$scope.activeAddress3 = address;
}
});
}
};
$scope.customer = [{
"name": "Dominik Mustermann",
"main_residence_id": "2",
"addresses": [{
"address_id": "1",
"name": "Cologne / Germany",
"city": "Cologne",
"country": "Germany",
}, {
"address_id": "2",
"name": "Rome / Italy",
"city": "Rome",
"country": "Italy"
}]
}, {
"name": "Joe Bloggs",
"main_residence_id": "3",
"addresses": [{
"address_id": "3",
"name": "Berlin / Germany",
"city": "Berlin",
"country": "Germany",
}, {
"address_id": "4",
"name": "New York / Usa",
"city": "New York",
"country": "Usa"
}]
}];
}]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.9/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.9/angular-strap.tpl.js"></script>
<div class="container col-xs-4", ng-controller="agencyCtrl">
<p style="padding-top: 20px">
First try <span style="color: red">Not working! </span>When I use the bs-tabs directive from angular-strap there is a bug when updating the second select box (address selection). I know that this is because the
"activeCustomer" model does not update
<p>
<hr>
<bs-tabs>
<bs-pane title='Customer Info'>
<div class="col-xs-12" style="padding-top: 20px">
<form name="customerForm" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" name="customerSelect" ng-model="activeCustomer" ng-change="setAddress()" ng-options="customer as customer.name for customer in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name" ng-model="activeCustomer.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" name="addressSelect" ng-options="address as address.name for address in activeCustomer.addresses" ng-model="activeAddress">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city" ng-model="activeAddress.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country" ng-model="activeAddress.country">
</div>
</div>
</div>
</div>
</form>
</div>
</bs-pane>
<bs-pane title="Empty" disabled="true"></bs-pane>
</bs-tabs>
</div>
<div class="container col-xs-4", ng-controller="agencyCtrl as aCtrl">
<p style="padding-top: 20px">
Second try <span style="color: red">Not working too! </span>Tried to fix the problem with the "activeCustomer" model. But still not working perfectly
<p>
<hr>
<bs-tabs>
<bs-pane title='Customer Info'>
<div class="col-xs-12" style="padding-top: 20px">
<form name="aCtrl.customerForm2" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" name="customerSelect2" ng-model="activeCustomer2" ng-change="setAddress2()" ng-options="customer2 as customer2.name for customer2 in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name2" ng-model="activeCustomer2.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" name="addressSelect2" ng-options="address2 as address2.name for address2 in activeCustomer2.addresses" ng-model="activeAddress2">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city2" ng-model="activeAddress2.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country2" ng-model="activeAddress2.country">
</div>
</div>
</div>
</div>
</form>
</div>
</bs-pane>
<bs-pane title="Empty" disabled="true"></bs-pane>
</bs-tabs>
</div>
<div class="container col-xs-4", ng-controller="agencyCtrl">
<p style="padding-top: 20px"><span style="color: blue">Working example for comparison! </span>When I do not use the bs-tabs directive, then my example works as expected.
<p>
<hr>
<div class="col-xs-12" style="padding-top: 20px">
<form name="customerForm3" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" ng-model="activeCustomer3" ng-change="setAddress3()" ng-options="customer3 as customer3.name for customer3 in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name3" ng-model="activeCustomer3.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" ng-options="address3 as address3.name for address3 in activeCustomer3.addresses"
ng-model="activeAddress3">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city3" ng-model="activeAddress3.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country3" ng-model="activeAddress3.country">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
如果您能告诉我如何通过更新模型来解决问题，我会很高兴。
我希望我可以解释我的问题并抱歉我的书面英语不好。
答案 0 :(得分：0)
bs-tabs和bs-pane指令各自创建一个新范围。因此activeCustomer已被保存，但被保存到由bs-pane而不是您的控制器范围创建的新范围。
您可以通过将{{activeCustomer}}插入bs-pane内的模板（更改后会显示）和bs-tabs之外（它不会显示）来查看。
一个简单的修复，如果它与应用程序的其余部分一起使用，就是将ng-controller="agencyCtrl"放在bs-pane指令中 - 请参阅更新的fiddle。
<bs-pane title='Customer Info'>
<div ng-controller="agencyCtrl">
.....
</div>
</bs-pane>