ng-if должен показывать только один объект

Привет, дорогая Сообщество Stackoverflow. У меня проблема. Во-первых вот мой код:ng-if должен показывать только один объект

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; 
    }

это прекрасно работать проблема заключается в том, что он показывает О.И. предложение-редактирования директивы для каждого повторного объекта. Если вам нужно больше информации, пожалуйста, не стесняйтесь спрашивать!

источник

2016-09-11 Yasin Yildiz

Все элементы в нг-повторить цикл. Итак, вы имеете в виду, что для всех повторяющихся элементов отображается предложение-edit? и вы хотите, чтобы только элемент с щелчком отображал редактирование, а не остальные элементы? – vbharath

Если вы не хотите трогать разметку и хотите 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:

Возможно, вы захотите разместить свой элемент вне вашего ng-repeat контейнер, потому что, насколько я вижу его в вашем фрагменте, вам нужен только один из offer -data из выбранных company.offers.

Итак, вы можете просто кэшировать 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; 
}

источник

2016-09-11 18:06:44 lexith

Прошу прощения, возможно, я не был достаточно ясен в своем Post, каждый объект должен иметь директиву, но только где нажата кнопка, она должна быть заметной. –

Понял это после моего поста, но я уже отредактировал свой ответ. Я редактирую его еще раз, чтобы сделать его более понятным. – lexith

Ничего себе, спасибо вам, что ваше второе Пошаговое руководство было правильным, когда вы потрясаете своей любовью: D. Я застрял часами сейчас по этой задаче –

Это будет связано с тем, что вы ограничены каждым объектом ng-repeat.

источник

2016-09-11 18:04:13

Я знаю, но как определить, что для каждого отдельного объекта, что он отображает только директиву на объекте, на который нажата кнопка. –

Если вы хотите переключать видимость 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>

источник

2016-09-11 18:15:58

ng-if должен показывать только один объект

ответ

Смежные вопросы