Question

我使用ui-router在AngularJS的页面上显示两个视图。底部视图是可供选择的产品列表。页面上的顶视图是一个表单，显示供用户在选择每个项目后完成。我希望表单在最终提交时包含所选项目的值。这两个视图目前使用单独的控制器。

据我所知，AngularJS并没有使用隐藏字段。将表单与所选项目相关联的最佳方式是什么，以便在提交时将其包含在内？理想情况下，我想在用户点击＆＃34;选择＆＃34;后立即将选择类型绑定到表单。按钮。

HTML：

<!--Form HTML-->

<form name="myForm">
<div class="control-group">
    <label>Name</label>
    <input type="text" name="name" ng-model="editProject.project.name">
</div>
   <label>Special instructions for this item</label>
   <textarea name="description" ng-model="editProject.project.description"></textarea>
<a href="#/" class="btn">Cancel</a>
<button ng-click="editProject.save()">Save</button>
</form>


<!--HTML for List of Items to Select-->

<tr ng-repeat="selection in selectionList.selections">
    <td>{{selection.type}}</td>
    <td>{{selection.cost}}</td>
    <td><button ng-click="(selection.type)">Select</button>
    </td>
</tr>

控制器：

//controller for form

myApp.controller('NewProjectCtrl', function($location, $timeout, Projects) {
var editProject = this;
editProject.save = function() {
    Projects.$add(editProject.project).then(function(data) {
        $location.path('/');
    });
};


//controller for list of items to select from

myApp.controller('SelectionListCtrl', function(Selections) {
var selectionList = this;
selectionList.selections = Selections;
});

Answer 1

我会这样考虑：创建一个服务并将其注册到myApp，然后存储这两个控制器之间共享的数据。选择项目时，在服务中注册其值。

然后您在SelectionListCtrl中广播项目的更改：$scope.$broadcast("new Item was selected")

然后，在NewProjectCtrl中，你应该听这个“选择了新项目”$scope.$on("new Item was selected")，在这里你可以从共享服务中获取值并在视图中显示或做任何你想做的事

Answer 2

就像Feras所说，您可以使用服务来设置和获取两种不同形式的值。

我的工厂设置和获取值

app.factory('MainService', function() {
  var itemProd = [];
  return {
    setProd: function(item) {
      itemProd.push(item);
      console.log(itemProd);
    },
    getProd: function() {
      return itemProd;
    }
  }
});

如果你需要完整的代码，这是我的小提琴“http://plnkr.co/edit/hvxI2ABmMBR6bNyKViFC?p=preview”

如何使用AngularJS在单独的表单中包含单击按钮的值

2 个答案: