1
对于工作项目，我必须使用“Angular-Strap”中的“bs-tabs”指令。Angular Strap“bs-tabs”指令：模型不更新
实施页面中有两个面板。在第一个面板中，您可以选择一个客户。每次选择客户后，底部面板中的第二个选择框（地址选择）应该更新为客户主要住所的地址。问题是activeCustomer模型不会更新，activeAddress也不会更新。
我试图通过在javascript中更新模型来解决这个问题。这种方法会在您首次选择客户时更新第二个模型，但如果您在“地址选择”选择框中更改地址，则会出现错误。 如果您再次更换客户，第二个面板不再更新。你可以在我的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>我会很高兴，如果你能告诉我如何与更新的模式来解决这个问题。
我希望我能解释我的问题，并为我的不好的书面英语感到抱歉。