AngularJS:ng-repeat和ng-if

时间:2016-07-29 08:00:58

标签: angularjs

当您按下表格行中的按钮时,我只想为该行显示<div>。但<div>出现在所有行中。

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

在控制器中:

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

1 个答案:

答案 0 :(得分:1)

确保您的HTML结构正确(ng-if内的ng-repeat)。

将HTML更新为:

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

希望这对你有帮助!