Question

我有一个有两个选择的表格，（1）父母和（2）孩子。选择“父项”后，“子项选择”选项将分别动态填充。目前，两者都在父控制器内。每个选择旁边都是一个新增的。当添加新父项时，将显示模式，输入新父项，单击提交，禁止用户错误，更新数据库，模式关闭，父控制器将新父项推送到范围并显示在父选择。

孩子选择是个问题。它打开了ChildrenController 的模态，虽然我可以将新创建的子项添加到db中，但是当模式关闭时我无法将其推送到主窗体，因为Children选择在Parent Controller下。

如何将新创建的孩子推送到主要表单的孩子的选择？

主要表格：

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

}

Answer 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函数。

AngularJS - 将新创建的子项推送到主窗体的子项选择

1 个答案: