离子从页面传递数组值到另一页面 [英] Ionic pass array value from page to another page

问题描述

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

I'm new to Ionic and I'm developing a demo which contains two pages. The first page contains a form which contains 3 fields. All these values from the three inputs are stored in a array. I want to display the array in table format in the second page but I'm not able to do it. How can I display the array in the second page?

第一页：

第二页：

第一页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={};

        }

})

推荐答案

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

for passing parameters through views i recommend to use a service or factory, it is much more maintainable.

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

But if you wanna use $stateParams you have to pass them in the $state.go function:

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

然后，在你的第二个视图中得到这样的参数：

And then, in your second view get the param like this:

$stateParams.bookId

当然你也需要把它放在路由器上

Of course you need put it in the router too

url: 'books/:bookId'

编辑：

这是工厂的例子。

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

First when you are going to redirect set the values:

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

然后在你的其他视图中得到参数：

Then in your other view gets the param:

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

这篇关于离子从页面传递数组值到另一页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！