(1)Parent と (2)Children の 2 つの select を持つフォームがあります。親アイテムが選択されると、子の選択オプションがそれぞれ動的に入力されます。現在、両方とも親コントローラー内にあります。各選択の横には新規追加があります。新しい親を追加すると、モーダルが表示され、新しい親が入力され、送信がクリックされると、ユーザー エラーが発生しなくなり、データベースが更新され、モーダルが閉じ、親コントローラーが新しい親アイテムをスコープにプッシュして表示されます。親選択で。
子どもたちの選択が問題です。ChildrenController のモーダルを開き、新しく作成した子を db に追加できますが、子の選択が親コントローラーの下にあるため、モーダルが閉じるときにメインフォームにプッシュできません。
新しく作成された子をメイン フォームの子の選択にプッシュするにはどうすればよいですか?
メインフォーム:
<div ng-controller="ParentController">
<div id="ParentDiv">
<select ng-model="parent" ng-options="parent.Name for parent in parents">
<option value="" selected>Select Parent ..</option>
</select>
<button class="addNew" ng-click="openDialog()"><i class="icon-plus"></i> [ add new ]</button>
</div>
<div id ="ChildDiv">
<select ng-model="child" ng-options="child.Name for child in parent.Childs">
<option value="" selected>Select Child After Parent ..</option>
</select>
<button class="addNew" ng-click="openDialog()"><i class="icon-plus"></i> [ add new ]</button>
</div>
</div>
Blesh がチャットで解決策を見つけてくれました: 2 ステップ
function ParentsCtrl($scope, $rootScope, $routeParams, $http, API, $location, $dialog) {
// Step #1
$scope.Parent = {};
$scope.addModel = function (item) {
$scope.Parent.Childs = $scope.Parent.Childs || [];
$scope.Parent.Childs.push(item);
};
.......
}
function ChildrenCtrl($scope, $rootScope, $routeParams, $http, API, $location, $dialog) {
// ステップ2
// Create
var copy = angular.copy($scope.child);
$http.post('/api/Childs/', copy)
.success(function () {
console.log('Copy Name 2: ' + copy.Name);
$scope.addModel(copy);
})
.error(function (data) {
alert(data);
});
};
};
}