Select 一些数据，然后在 Angularjs 中持续到下一个 controller/view

Question

我正在通过使用 angular-resource 的 service 引入一些简单数据，如下所示：

angular.module('InvoiceService',
                ['ngResource'])

.factory('InvoiceService', function ($resource) {
    return $resource('data.json');
})
.controller("DashboardListCtrl", function (InvoiceService) {
        var vm = this;

 InvoiceService.query(function (data) {
        vm.invoices = data;
 });

    vm.submit = function (form) {
       console.log(form)
    };
});

和 html:

<form name="invoices" role="form" novalidate>
  <ul>
    <li ng-repeat="invoice in vm.invoices">
     <input type="checkbox" id="{{'id-' + $index}}" />
     <p><strong>Order:</strong></p>
     <p>{{invoice.order}}</p>              
    </li>
    <input type="submit" value="Continue" ng-click="vm.submit(invoices)" />
   </ul>
 </form>

一切正常；数据按预期显示在视图中。问题：我想做的是能够 select 一个 checkbox，获取与那个 checkbox 关联的数据位，并将它传递给下一个 controller/view提交。我该怎么做？

那么，接下来我该做什么？我在正确的轨道上吗？ **编辑：添加了所有 angular 代码以帮助阐明

Answer 1

将答案张贴为回复太大而无用。

您应该使用 $scope 将控制器的数据与页面的其余部分隔离开来。

阅读有关 ng-model http://docs.angularjs.org/api/ng/directive/ngModel 以及如何使用它将复选框值双向绑定到控制器变量的信息。如果您调用 $scope.submit = function() { } 则无需使用 theFormName 因为您的 ng-model 变量将在 $scope 中可用。

angular.module('InvoiceService',
                ['ngResource'])

.factory('InvoiceService', function ($resource) {
    return $resource('data.json');
})
.controller("DashboardListCtrl", function ($scope, InvoiceService) {
 InvoiceService.query(function (data) {
      $scope.invoices = data;
 });
 $scope.submit = function () {
    // FIXME to access a property of each $scope.invoices
    console.log('checkbox1=' + $scope.invoices[0].checkbox1);
 };
});

然后 HTML:

<form role="form" novalidate ng-controller="DashboardListCtrl"><!-- EDIT: added ng-controller=, remove name= -->
  <ul>
    <li ng-repeat="invoice in invoices"><!-- EDIT: remove 'vm.' -->
     <input type="checkbox" id="{{'id-' + $index}}" ng-model="invoice.checkbox1" /><!-- EDIT: added ng-model= -->
     <p><strong>Order:</strong></p>
     <p>{{invoice.order}}</p>              
    </li>
    <input type="submit" value="Continue" ng-click="submit()" /><!-- EDIT: remove 'vm.' -->
   </ul>
 </form>

Select 一些数据，然后在 Angularjs 中持续到下一个 controller/view

Select some data and then persist to next controller/view in Angularjs

angularjs

angular-resource

angularjs-ng-repeat

angular-ui-router