페이지에서 다른 페이지로의 이오니아 패스 배열 값

Question

저는 이오 닉이 처음이에요. 두 페이지가 들어있는 데모를 만들고 있어요. 첫 번째 페이지에는 3 개의 필드가 포함 된 양식이 있습니다. 3 개의 입력 값은 모두 배열로 저장됩니다. 두 번째 페이지에 표 형식으로 배열을 표시하고 싶지만 할 수 없습니다. 두 번째 페이지에 배열을 표시하려면 어떻게합니까?

페이지 하나를

2 페이지 :

페이지 하나 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> 

2 페이지 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> 

내가 서비스 나 공장을 사용하는 것이 좋습니다 뷰를 통해 매개 변수를 전달하는

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

을 app.js, 그것은 훨씬 더 유지 보수입니다.

그러나 당신이 $ state.go 함수를 통과해야 당신 싶어 사용 $의 stateParams 경우 :

$stateParams.bookId 

: 다음

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

그리고, 두 번째보기에이 같은 PARAM를 얻을 수 물론

당신은 라우터에 넣을 필요도

url: 'books/:bookId' 

편집 :

다음은 factory를 사용한 예입니다.

당신이 값을 설정 리디렉션하려고 할 때는 먼저 : 다른보기에서 다음

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

이 PARAM 가져옵니다

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

: 마지막으로

vm.bookSelected = bookDataFactory.getBookSelected(); 

, 이것은 공장