AngularJS: ng-repeat and ng-if

Question

I'm trying to get a <div> when you press a button in a table row appears only for that row. But <div> appears in all rows.

<tr ng-repeat="company in companiesList">
........
<div ng-if="company.verified == 'false'">
   <input type="button" ng-class="classBtnActivar" value="ACTIVAR" ng-click="activateCompany(company.id)">
       <div style="background-color: #d1d1d1; border-radius: 100px;" ng-if="company.id == idcompany">
           <p style="text-align: center">¿Quieres activar todos los comercios de la compañía?</p>
           <div style="text-align: center">
               <input type="button" ng-class="classBtnActivar" value="SI" style="text-align: center">
               <input type="button" ng-class="classBtnActivar" value="NO" style="text-align: center">
           </div>
       </div>
</div>

In controller:

$scope.activateCompany = function ( id ) {
    $scope.idcompany = id;
};

ng-if="company.verified==false", try this

rejo
– rejo

2016-07-29 08:05:16 +00:00
Commented Jul 29, 2016 at 8:05 — rejo
– rejo, Commented Jul 29, 2016 at 8:05
i think his problem is with 2nd ng-if @tom moc

Sa E Chowdary
– Sa E Chowdary

2016-07-29 08:07:17 +00:00
Commented Jul 29, 2016 at 8:07 — Sa E Chowdary
– Sa E Chowdary, Commented Jul 29, 2016 at 8:07
yes , may be.. @lban, provide complete code.

rejo
– rejo

2016-07-29 08:08:50 +00:00
Commented Jul 29, 2016 at 8:08 — rejo
– rejo, Commented Jul 29, 2016 at 8:08
yes we can help out if u made a plunker iban

Sa E Chowdary
– Sa E Chowdary

2016-07-29 08:10:21 +00:00
Commented Jul 29, 2016 at 8:10 — Sa E Chowdary
– Sa E Chowdary, Commented Jul 29, 2016 at 8:10
Can you show how does company.verified gets populated?

Bon Macalindong
– Bon Macalindong

2016-07-29 08:31:46 +00:00
Commented Jul 29, 2016 at 8:31 — Bon Macalindong
– Bon Macalindong, Commented Jul 29, 2016 at 8:31

Huy Chau · Accepted Answer · 2016-07-29 08:24:26Z

1

Make sure your HTML structure is correct (ng-if inside ng-repeat).

Update HTML to:

<tr ng-repeat="company in companiesList track by $index">
  ....
  <div ng-if="!company.verified">
     <input type="button" ng-class="classBtnActivar" value="ACTIVAR" ng-click="activateCompany(company.id)">
         <div style="background-color: #d1d1d1; border-radius: 100px;" ng-if="company.id == idcompany">
             <p style="text-align: center">¿Quieres activar todos los comercios de la compañía?</p>
             <div style="text-align: center">
                 <input type="button" ng-class="classBtnActivar" value="SI" style="text-align: center">
                 <input type="button" ng-class="classBtnActivar" value="NO" style="text-align: center">
             </div>
         </div>
  </div>
</tr>

Hope this help you!

answered Jul 29, 2016 at 8:24

Huy Chau

2,24821 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iban Lopez Over a year ago

doesnt works!! thanks...the problem is with 2nd ng-if

Collectives™ on Stack Overflow

AngularJS: ng-repeat and ng-if

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related