0

(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);
        });
};
};

}

4

1 に答える 1

1

そのため、最終的に行ったことは、選択されたものに基づいて追加を実行するために、子コントローラーから呼び出すことができるメソッドを親コントローラーに追加することでした。

function ParentCtrl($scope) {
   $scope.parentItems = [
        { name: 'foo', children: [] },
        { name: 'bar', children: [] }
        { name: 'test', children: [] }
   ];

   $scope.addChild = function(item) {
      $scope.selectedParent.children.push(item);
   };
}


function ChildCtrl($scope, $http) {
   $scope.doSomething = function () {
       var item = { childName: 'test child' };
        /* TODO: stuff here */
       $scope.addChild(item);
   };
}

<div ng-controller="ParentCtrl">
   <select ng-model="selectedParent" ng-options="x.name for x in parentItems"></select>
   <div ng-controller="ChildCtrl">
      <a ng-click="doSomething()">do something and add child</a>
   </div>
</div>

子コントローラーは、親スコープによって提供される add 関数を呼び出すことができるという考えです。

于 2013-03-04T16:53:47.170 に答える