[英]Sharing data of a ng-repeat form field across controllers
我正在制作帶有按鈕的名片訂購單,以添加另一張名片。 我希望按鈕創建另一個名片表單,並將表單中的所有數據與另一個視圖的控制器共享。
我有兩個模板連接到各自的控制器。
代碼樣例:
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
<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上
這兩個視圖均記錄了Cards集合,但未顯示ng-repeat模板。
放慢腳步,仔細看看。
在about.html
,您似乎想遍歷卡片。
<div ng-repeat="card in Cards">
但是在about.js
每個單獨的卡都分配給作用域。
$scope.person0=Cards[0]; // no reference in template
要解決此問題,請將Cards放在about.js
范圍內。
$scope.Cards = Cards
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.