嗨,亲爱的Stackoverflow社区,我有一个问题。首先是我的代码:
html:<md-card md-theme-watch flex="100" ng-repeat="offer in company.offers">
<md-button class="md-fab md-mini md-primary md-fab-oi" aria-label="copy" ng-click="company.setEditVisibility()">
<oi-offer-edit offer="offer" is-change="true" ng-if="company.isEditVisible">
</oi-offer-edit>
</md-card>
我的控制器:
function setEditVisibility(){
vm.isEditVisible = !vm.isEditVisible;
}
它工作得很好,问题是它为每个重复的对象显示i-offer-edit指令。如果你需要更多的信息,请不要犹豫,问!
如果你不想触摸你的标记,并希望oi-offer-edit
元素重复,你必须在offer
对象本身使用布尔属性:
<md-card md-theme-watch flex="100" ng-repeat="offer in company.offers">
<md-button class="..." ng-click="offer.formVisible = !offer.formVisible">
<oi-offer-edit offer="offer" is-change="true" ng-if="offer.formVisible">
</oi-offer-edit>
</md-card>
在我意识到之前的解决方案,你想在每个md-card
中都有该指令:
您可能希望将oi-offer-edit
元素放在ng-repeat
容器之外,因为据我在代码片段中看到的,您只需要一个具有所选company.offers
的offer
-数据的元素。
因此,您可以在单击处理程序上缓存offer
,并使oi-offer-edit
可见。像这样:
<md-card md-theme-watch flex="100" ng-repeat="offer in company.offers">
<md-button class="..." ng-click="company.setEditVisibility(offer)">
</md-card>
<oi-offer-edit offer="currentSelectedOffer" is-change="true" ng-if="company.isEditVisible">
</oi-offer-edit>
function setEditVisibility(selectedOffer){
vm.currentSelectedOffer = selectedOffer;
vm.isEditVisible = !vm.isEditVisible;
}
会的,因为你已经绑定了每个ng-repeat对象
如果你想独立于每个报价对象切换oi-offer-edit
的可见性,那么你应该将你在ng-if
指令中检查的布尔标志移动到报价数组中。
检查下面的例子,它将帮助你完成你想做的事情。
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.company = {
offers: [
{ id: 1, name: 'Offer 1' },
{ id: 2, name: 'Offer 2' },
{ id: 3, name: 'Offer 3' }
]
};
vm.setEditVisibility = setEditVisibility;
function setEditVisibility(id) {
for (var i = 0; i < vm.company.offers.length; i++) {
if (vm.company.offers[i].id === id) {
vm.company.offers[i].isEditVisible = !vm.company.offers[i].isEditVisible;
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<div ng-repeat="offer in ctrl.company.offers">
{{offer.name}}
<button ng-click="ctrl.setEditVisibility(offer.id)">Toggle Edit Visibility</button>
<span ng-if="offer.isEditVisible">{{offer.name}} Edit Details</span>
</div>
</div>
</div>