1
プロジェクトでは、「角型ストラップ」の「bs-tabs」ディレクティブを使用する必要があります。角ストラップ "bs-tabs"指令：モデルが更新されない
実装されたページには2つのパネルがあります。最初のパネルでは、顧客を選択することができます。顧客を選択した後は、下のパネルの2番目の選択ボックス（アドレス選択）を顧客のメインレジデンスのアドレスに更新する必要があります。問題は、activeCustomerモデルが更新されず、activeAddressも更新されないということです。
javascriptでモデルを更新して修正しようとしました。この方法では、最初に顧客を選択するときに2番目のモデルが更新されますが、「アドレス選択」選択ボックスでアドレスを変更するとバグがあります。 顧客をもう一度変更すると、2番目のパネルはもう更新されません。両方の説明された状況は私の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>あなたはどのようにモデルを更新して問題を解決するために私に言うことができれば、私は幸せになります。
私は私の問題を説明でき、私の悪い書かれた英語のために申し訳ありません。