0
ng-dialogに問題が継続してモデルデータを正しく表示しています。私のアプリは2つのng-dialogインスタンスを使用します.1つはデータ（この場合はリーグ）を追加し、もう1つはデータを編集するダイアログです。どちらも同じngモデルデータを使用します。 「リーグを追加」を選択すると、最初のダイアログがポップアップし、ユーザーがフィールドにデータを入力してレコードを保存すると、ダイアログが閉じられ、メインページには作成されたリーグとそのデータが表示されます。 EDITボタンが表示されます。
この場合の問題は、EDITボタンを押したときに発生します。
コントローラのopenEditLeagueメソッドが呼び出され、leagueFormに編集しようとしているリーグのデータが事前に設定されています。
'use strict';
angular.module('ma-app')
.filter('trustUrl', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
})
.controller('HomeController', ['$scope', 'ngDialog', 'authService', 'coreDataService', 'userService', '$rootScope', 'clubService', 'schedulingService', function($scope, ngDialog, authService, coreDataService, userService, $rootScope, clubService, schedulingService) {
....
$scope.leagueForm = {
name: '',
shortname: '',
minAgeGroup: null,
maxAgeGroup: null,
type: null,
rescheduleDays: '',
consequence: '',
fine: '',
logoURL: '',
leagueId: ''
};
....
$scope.openEditLeague = function(league) {
console.log("\n\nOpening dialog to edit league");
console.log(league);
$scope.leagueForm = {
name: league.name,
shortname: league.short_name,
minAgeGroup: league.min_age_group,
maxAgeGroup: league.max_age_group,
type: league.type,
rescheduleDays: league.reschedule_time,
consequence: league.reschedule_consequence,
fine: league.reschedule_fine,
logoURL: league.logo_url
};
console.log("Current entries include: ");
console.log($scope.leagueForm);
ngDialog.open({ template: 'views/editLeague.html', scope: $scope, className: 'ngdialog-theme-default custom-width-600', controller:"HomeController" });
};
....
}])
;
ng-dialogを開く前に、$ scope.leagueFormの内容を記録していて、データの内容が正しいです。 ただし、ダイアログが開いても、すべてのフィールドは空です。
これはかなり単純なデータバインディングでなければならないので、私は間違ったことをする必要があります。ここで
はNG-ダイアログを生成するために使用されているeditLeague.htmlの内容は以下のとおりです。
<div class="ngdialog-message">
<div>
<h3>Edit League</h3>
</div>
<div> </div>
<div>
<form class="form-horizontal" ng-submit="editLeague()">
<div class="form-group">
<label class="sr-only" for="name">League Name</label>
<div class="col-xs-12 col-sm-6">
<input type="text" class="form-control" id="name" placeholder="league name" ng-model="leagueForm.name">
</div>
<label class="sr-only" for="shortname">League Abbreviation</label>
<div class="col-xs-12 col-sm-6">
<input type="text" class="form-control" id="shortname" placeholder="league abbreviation" ng-model="leagueForm.shortname">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="minage">Minimum Age Group</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Min Age Group</div>
<select id="minage" class="form-control" ng-model="leagueForm.minAgeGroup" ng-options="ageGroup as ageGroup.name for ageGroup in ageGroups"></select>
</div>
</div>
<label class="sr-only" for="maxage">Maximum Age Group</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Max Age Group</div>
<select id="maxage" class="form-control" ng-model="leagueForm.maxAgeGroup" ng-options="ageGroup as ageGroup.name for ageGroup in ageGroups"></select>
</div>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="type">League Type</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Type</div>
<select id="type" class="form-control" ng-model="leagueForm.type" ng-options="leagueType as leagueType.name for leagueType in leagueTypes"></select>
</div>
</div>
<label class="sr-only" for="days">Day to Reschedule</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" id="days" placeholder="days to reschedule" ng-model="leagueForm.rescheduleDays">
<div class="input-group-addon">Days</div>
</div>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="consequence">Missed Reschedule Date Consequence</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Consequence</div>
<select id="consequence" class="form-control" ng-model="leagueForm.consequence">
<option value =""></option>
<option value="NONE">N/A</option>
<option value="FORFEIT">Forfeit</option>
<option value="FINE">Fine</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="input-group" ng-show="!fineHidden">
<label class="sr-only" for="fine">Fine</label>
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="fine" placeholder="fine" ng-model="leagueForm.fine">
<div class="input-group-addon">.00</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-info">Update</button>
<button type="button" class="btn btn-default" ng-click=closeThisDialog("Cancel")>Cancel</button>
</form>
</div>
<div> </div>
</div>
あなたは代替として何を提案しますか？ダイアログにはコントローラが必要ですか？ –