Angular js - 如何根据条件为 ng-repeat 编写代码答案

【问题标题】：Angular js - how to write code for ng-repeat based on conditionAngular js - 如何根据条件为 ng-repeat 编写代码
【发布时间】：2019-01-17 14:18:24
【问题描述】：

我正在开发酒店 POS 系统的项目。我正在接受客户的订单。系统中存在两种类型的订单：

拿走订单。
送货上门订单。

在 orders 表中，我存储了所有订单。我正在 allCurrentTakeAwayOrder 中获取外卖订单和 allcurrentHMOrder 中的送货上门订单我想在不同的部分显示外卖订单和送货上门订单。

如果标题是 Take Away 我想设置条件，那么 ng-repeat 应该从 allCurrentTakeAwayOrder 如果它的 Home Delivery 然后从 allcurrentHMOrder 为：

<tr ng-repeat='orders in allCurrentTakeAwayOrder if heading=Take Away or
   orders in allcurrentHMOrder if heading=Home Delivery' >
</tr>

【问题讨论】：

或者您可以创建自己的过滤器，像在此处一样比较值并返回 true 或 false 让 ng-repeat 知道他是否应该显示测试的元素。这是一个文档链接：docs.angularjs.org/guide/filter（向下滚动，直到找到有关自定义过滤器的部分）。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

如果您真的想在 ng-repeat 中使用条件，我建议您使用三元运算符，如下所示：

<input type="checkbox" name="condition" ng-model="condition" />
<ul ng-init="numbers=[1,2,3];letters=['a','b','c'];">
  <li ng-repeat="i in (condition ? numbers : letters)">
    {{i}}
  </li>
</ul>

【讨论】：

恕我直言，这有点复杂，出于性能目的，您不应该在 HTML 中这样做。还不是最佳答案，我建议您避免这样做。

【解决方案2】：

使它工作的最自然的方法是构建allCurrentTakeAwayOrder 和allcurrentHMOrder 作为orders 的单个集合，并确保它的项目包含属性类型（TakeAway/Delivery）。在这种情况下，您将能够像这样更改您的代码：

ng-repeat="order in orders | filter:{type:heading}"

【讨论】：

【解决方案3】：

我在 ng-repeat 中使用了 ng-if

<tr ng-repeat='orders in allCurrentTakeAwayOrder | filter:{type:heading}' >
    <label ng-if="orders.heading == 'Take Away' || orders.heading == 'Home Delivery'">

    </label>
 </tr>

我认为它可以帮助你。

【讨论】：

这可能是orders.heading 而不仅仅是orders，他应该在您的 ng-if 中进行比较，除此之外，这应该可以工作。
没错，应该是orders.heading

【解决方案4】：

将$scope 变量定义为data：$scope.data

然后在 HTML 中：

<tr ng-repeat='orders in data' >
    ...
</tr>

JS - 控制器：

$scope.data = [];
if($scope.heading == 'Take Away') {
    $scope.data = angular.copy(allCurrentTakeAwayOrder);
} else if($scope.heading == 'Home Delivery') {
    $scope.data = angular.copy(allcurrentHMOrder);
} else {
    // Any default code or change any one condition to incorporate in this block and remove else if
}

【讨论】：

【解决方案5】：

请关注此link 以获得良好的问题解决方案。

但是，您的案例摘要如下：

<tr ng-repeat="orders in {true: allCurrentTakeAwayOrder, false:allcurrentHMOrder}[heading==='Take Away']">

  //Output something

</tr>

希望这会有所帮助。

【讨论】：

【解决方案6】：

您可能需要为此使用比较器。

$scope.values = ["Take Away", "Home Delivery"]; 

$scope.comparator = function(expected, actual){  
  return actual.indexOf(expected) > -1;
}

<tr ng-repeat='orders in allCurrentTakeAwayOrder | filter:{heading:values}:comparator' >

</tr>

【讨论】：

为什么需要自定义过滤器？ :)
错字。不是自定义过滤器，我们可以使用比较器