if应该只显示一个对象

ng-if should show only one object

本文关键字：显示 一个对象 if      更新时间：2023-09-26

嗨，亲爱的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>

相关文章：