跨控制器共享ng-repeat表单字段的数据

Question

我正在制作带有按钮的名片的订单以添加另一张名片。我希望按钮创建另一个名片形式，并将表单中的所有数据与另一个视图的控制器共享。

我有两个模板连接到他们各自的控制器。

• order.html，order.js
• confirm.html，confirm.js

代码示例：

order.js

.factory('Cards', function() { 
var Cards = [] 

return Cards 
}) 
.controller('TestCtrl', function ($scope, Cards) { 
    $scope.person0={name: '', email:'', description:''} 
    $scope.person1={name: '', email:'', description:''} 
    if (Cards.length < 2) { 
    Cards.push($scope.person0); 
    Cards.push($scope.person1); 
    } 
} 

秩序.html

个

<md-toolbar layout='column' layout-align='center' ng-repeat="card in Cards"> 
     <md-button layout-margin layout-padding flex='100' class='md-raised md-primary'> 
      <h1>{{ card.name }}</h1> 
      <h1>{{ card.email }}</h1> 
      <h1>{{ card.description }}</h1> 
     </md-button> 
     <div layout='column' layout-align='center center' > 
      <input type="text" style="color:black;" flex='' ng-model="card.name"> 
      <input type="text" style="color:black;" flex='' ng-model="card.email"> 
      <input type="text" style="color:black;" flex='' ng-model="card.description"> 
     </div> 
</md-toolbar> 

about.js

.controller('AboutCtrl', function ($scope, Cards) { 
    $scope.person0=Cards[0]; 
    $scope.person1=Cards[1]; 
    }); 

about.html

<div ng-repeat="card in Cards"> 
    <md-toolbar layout='column' layout-align='center'> 
     <md-button layout-margin layout-padding flex='100' class='md-raised md-primary'> 
     <h1>{{card.name}}</h1> 
     <h1>{{card.email}}</h1> 
     <h1>{{card.description}}</h1> 
     </md-button> 
    </md-toolbar> 
    <md-content> 

    </md-content> 
    </div> 

我想从order.html表单数据将被显示在confirm.html

卡片集合被记录为bo th视图但ng-repeat模板不显示。

Answer 1

慢下来，仔细看看。

在about.html它看起来像你想循环卡片。

<div ng-repeat="card in Cards"> 

但是在about.js中，每张卡都被分配到范围。

$scope.person0=Cards[0]; // no reference in template 

要解决此问题，请将卡放在about.js范围内。

$scope.Cards = Cards