[英]Sharing data of a ng-repeat form field across controllers
I'm making an order form for a business card with a button to add another business card. 我正在制作带有按钮的名片订购单,以添加另一张名片。 I want the button to create another business card form and all the data from the forms to be shared with the controller of another view.
我希望按钮创建另一个名片表单,并将表单中的所有数据与另一个视图的控制器共享。
I have two templates connected to their respective controllers. 我有两个模板连接到各自的控制器。
Code Samples: 代码样例:
order.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);
}
}
order.html order.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 about.js
.controller('AboutCtrl', function ($scope, Cards) {
$scope.person0=Cards[0];
$scope.person1=Cards[1];
});
about.html 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>
I want the form data from order.html to be displayed on confirm.html 我希望来自order.html的表单数据显示在confirm.html上
The Cards collection gets logged for both views but the ng-repeat templates do not get displayed. 这两个视图均记录了Cards集合,但未显示ng-repeat模板。
Slow down and take a closer look. 放慢脚步,仔细看看。
In about.html
it looks like you want to loop through cards. 在
about.html
,您似乎想遍历卡片。
<div ng-repeat="card in Cards">
But in about.js
each individual card is assigned to scope. 但是在
about.js
每个单独的卡都分配给作用域。
$scope.person0=Cards[0]; // no reference in template
To fix this, put the Cards on the about.js
scope. 要解决此问题,请将Cards放在
about.js
范围内。
$scope.Cards = Cards
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.