Ионная передача массива со страницы на другую страницу

Question

Ионная передача массива со страницы на другую страницу

0

Я новичок в 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={};

        }

})

sam Joel 12 авг. 2016, в 13:59

Источник

Теги:

ionic-framework

angularjs

hybrid-mobile-app

1 ответ

Ещё вопросы

Fernando Del Olmo · Answer 1 · 2016-08-12T10-43-00.000Z

для передачи параметров через представления я рекомендую использовать сервис или завод, он гораздо удобнее обслуживать.

Но если вы хотите использовать $ 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;
    }
  }
})();

можете показать мне пример, потому что я новичок в ионной
с обслуживанием / фабрикой? или Stateparams
Можете ли вы, пожалуйста, дать пример кода для макета выше, используя фабричный метод, я попробовал все методы, но я не смог получить желаемый результат.