离子传递数组值从一页到另一页

Question

我是Ionic的新手，正在开发一个包含两页的演示。 第一页包含一个包含3个字段的表单。 来自三个输入的所有这些值都存储在一个数组中。 我想在第二页中以表格格式显示数组，但无法执行。 如何在第二页中显示数组？

第一页：

第二页：

第一页HTML：

<form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">Name:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" placeholder="Enter Name" ng-model="contact.name">
                <div>{{contact.name}}
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="pwd">Email:</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" placeholder="Enter Email" ng-model="contact.email">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="pwd">Mobile No:</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" id="mobile" placeholder="Enter Mobile" ng-model="contact.mobile">
            </div>
        </div>
        {{contact}}
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary" ng-click="submit(contact)">Submit</button>
            </div>
        </div>
    </form>

第二页HTML：

 <div class="jumbotron" >
    <table class="table table-hover" >
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Mobile</th>

        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in contacts track by $index"> 
          <td>{{x.name}} </td>
          <td>{{x.email}}</td>
          <td>{{x.mobile}}</td>
        </tr>
      </tbody>
    </table>
    </div>
  </ion-content>

app.js

controller('Home', function($scope,$stateParams,contact){

    $scope.contacts = [];
        /*$scope.contact ={};*/
        console.log($scope.contacts.length);
        console.log($scope.contacts);

        $scope.submit = function(contact) {
            // console.log('am in');

            $scope.contacts.push(contact);
            console.log($scope.contacts);
            refresh();
        };

        var refresh = function() {
            $scope.contact = '';
        };
        $scope.removeItem = function(x) {
            var index = $scope.contacts.indexOf(x);
            alert("deleting" + index);
            $scope.contacts.splice(index, 1);

        }
        $scope.editItem = function(x) {
            $scope.current = x;
        }
        $scope.save=function(x){
          $scope.current={};

        }

})

Answer 1

为了通过视图传递参数，我建议使用服务或工厂，它更易于维护。

但是，如果您想使用$ stateParams，则必须在$ state.go函数中传递它们：

$state.go('app.book', {
     bookId: book._id
});

然后，在第二个视图中，获取如下所示的参数：

$stateParams.bookId

当然，您也需要将其放入路由器

url: 'books/:bookId'

编辑：

这是工厂示例。

首先，当您要重定向时，请设置值：

function bookDetail(book) {
    bookDataFactory.setBookSelected(book);
    $state.go('app.book');
}

然后在另一个视图中获取参数：

vm.bookSelected = bookDataFactory.getBookSelected();

最后，这是工厂：

(function() {
'use strict';

angular
    .module('library')
    .factory('bookDataFactory', bookDataFactory);

/* @ngInject */
function bookDataFactory() {

    var bookSelected;

    var service = {
        setBookSelected: setBookSelected,
        getBookSelected: getBookSelected
    };

    return service;

    function setBookSelected(book) {
      bookSelected = book;
    }

    function getBookSelected() {
      return bookSelected;
    }
  }
})();