0

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

孩子的选择是个问题。它打开了 ChildrenController 的模态，虽然我可以将新创建​​的子项添加到数据库中，但我无法在模态关闭时将其推送到主窗体，因为子项选择位于父控制器下。

如何将新创建的子项推送到主窗体的子项选择？

主要形式：

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

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

这个想法是子控制器可以调用父范围提供的添加函数。

于 2013-03-04T16:53:47.170 回答