Ionic pass array value from page to another page

Question

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?

Page one:

Page two:

Page one 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>

Page two 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={};

        }

})

Fernando Del Olmo · Accepted Answer · 2016-08-19 06:19:40Z

2

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

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'

EDIT:

Here is the example with factory.

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

Finally, this is the factory:

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

edited Aug 19, 2016 at 6:19

answered Aug 12, 2016 at 12:22

Fernando Del Olmo

1,45017 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fernando Del Olmo Over a year ago

with service/factory? or stateparams

Lakshmi Narasimhan Over a year ago

can you plz give sample code for above layout using factory method i have tried all the methods still im not able to get the desired result.

Collectives™ on Stack Overflow

Ionic pass array value from page to another page

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related