Question

我是棱角分明的新手并尝试将其纳入我的应用程序中。

到目前为止，我已经能够设置一个正常工作的简单ng-repeat-start/end。

我面临的问题是，当我下表中的列：{{country.detail}}包含大于0的值时（例如：“5个可用详细信息”），以下行（.countries-detail ）应该显示。

如果{{country.detail}}包含的值等于0（例如：“0 details available”），则下一行（.countries-detail）应隐藏。

这是我的HTML：

<tr ng-repeat-start="country in countries" >
   <td data-show="#show-{{$index}}">{{country.name}}</td>
   <td>{{country.population}}</td>
   <td>{{country.detail}}</td>
   <td>{{country.currency}}</td>
   <td>{{country.gpd}}</td>
</tr>

<tr ng-repeat-end class="countries-detail" ng-hide="showCountriesDetail">
   <td>
       <div id="show-{{$index}}">
          <p>countries detail lorem epsum</p>
          <p>countries detail lorem epsum</p>
          <p>countries detail lorem epsum</p>
          <p>countries detail lorem epsum</p>
       </div>
   </td>
</tr>

myController的：

app.controller("CountriesController", function($scope) {

    $scope.showCountriesDetail = true;

});

我应该在控制器或指令中处理此逻辑吗？

Answer 1

怎么样：

<tr ng-repeat-start="country in countries" >
   <td data-show="#show-{{$index}}">{{country.name}}</td>
   <td>{{country.population}}</td>
   <td>{{country.detail}}</td>
   <td>{{country.currency}}</td>
   <td>{{country.gpd}}</td>
</tr>

<tr ng-repeat-end class="countries-detail" ng-if="country.detail[0] > 0">
   <td>
       <div id="show-{{$index}}">
          <p>countries detail lorem epsum</p>
          <p>countries detail lorem epsum</p>
          <p>countries detail lorem epsum</p>
          <p>countries detail lorem epsum</p>
       </div>
   </td>
</tr>

这对你有用吗？

角度使用ng-repeat来显示隐藏

1 个答案: