在“ng-repeat”中使用“ng-show”,

时间:2017-07-21 11:30:06

标签: angularjs

我正在使用AngularJS开发Web应用程序。 应用程序显示表格中的项目列表。

这是打印表格的代码:

  <table>
      <tr ng-repeat="x in content.listaOperaciones>
            <td>{{ x.idOperacion }} </td>
            <td>{{ x.idGan }}</td>
            <td>{{ x.idEm}}</td>
            <td>{{ x.idGate}}</td>
            <td>{{ x.idRf }}</td>
            <td>{{ x.peso }}</td>
            <td>{{ x.duracion }}</td>
            <td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>      
        </tr>
      </table> 

这就是table looks like一次以html格式打印的方式。

我想通过使用一些可由用户访问的变量在表中的每个元素中实现多个过滤器。

我的想法是使用“ng-repeat”或“ng-show”语句过滤“ng-if”语句中的每个元素。

这是用户可以修改变量的HTML代码:

<input ng-model="tiempoMinimo">
 <input ng-model="$ctrl.PesoMinimo">
 <input ng-model="$ctrl.PesoMaximo">

这就是我正在修改表构造函数的方法:

<tr ng-repeat="x in content.listaOperaciones | orderBy : $ctrl.orderProp | filter:$ctrl.Busc" ng-if="x.peso > $ctrl.PesoMinimo && x.peso < $ctrl.PesoMaximo">
  <div ng-show="x.duracion < $parent.tiempoMinimo">

    <td>{{ x.idOperacion }} </td>
    <td>{{ x.idGan }}</td>
    <td>{{ x.idEm}}</td>
    <td>{{ x.idGate}}</td>
    <td>{{ x.idRf }}</td>
    <td>{{ x.peso }}</td>
    <td>{{ x.duracion }}</td>
    <td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>

</tr>

在“ng-if”clausule中使用“ng-repeat”进行过滤正在运行。

使用嵌套在“ng show”循环中的“ng-repeat”进行过滤无效...

由于我想使用多个过滤器(可能是10或20),我宁愿使用嵌套在“ng-show”循环中的“ng-repeat”指令,因此代码更容易理解... < / p>

在这里,您可以使用源代码: https://jsfiddle.net/DSG00/f94sjtty/

提前谢谢你。 DIDAC

1 个答案:

答案 0 :(得分:0)

你的小提琴不起作用,因为你不能在div内使用tr。将ng-show移至tr所在的ng-repeat元素。同时更改!$parent.tiempoMinimo || x.peso > $parent.tiempoMinimo之类的条件,因此当您的输入为空时,它不会隐藏整个表格。