ng-repeat 与 if else 条件 Angularjs（前端 [HTML] 部分）答案

【问题标题】：ng-repeat with if else Conditions Angularjs (Front-End [HTML] part)ng-repeat 与 if else 条件 Angularjs（前端 [HTML] 部分）
【发布时间】：2018-03-29 10:30:26
【问题描述】：

寻找解决方案

实际数据

tier_price:
    0:   
      price: "29.0000"
      price_qty: 1
    1:
      price: "28.5000"
      price_qty: 2
    2:
      price: "28.0000"
      price_qty: 4
    3:
      price: "27.1500"
      price_qty: 6

这是我的输入

price_qty = [1,2,4,6] 注意：数组是动态的

$index = [0,1,2,3] 注意：索引取决于数组大小

count = 1 向前（点击按钮会手动增加）

注意：每次 Count 增加时，以下代码将运行 4 次 例如 [1,2,4,6]

而且一旦条件匹配，它不应该进一步检查其他条件，那种 break 语句

<div ng-repeat="tier in model.selected.tier_price">

  <div ng-if="model.item.count == tier.price_qty">
     Matching Items (This is working perfect)
  </div> 

  <div ng-if="model.item.count < tier.price_qty && model.item.count == tier.price_qty+$index-3">
      /** Facing issue at this place, Look like need to add One more
          condition to achieve and don't know what should be the 
          condition because now if i use [model.item.count == tier.price_qty+$index-3] 
          Until Count==4 it work fine but when Count==5 
          then it wrong again because condition is not perfect**/
  </div>

  <div ng-if="model.item.count > tier.price_qty">
     When Count is More than price_qty
  </div>

</div>

下面是我真正想要实现的目标

买 1 买 3 买 5 是我的数

【问题讨论】：

请帮助我区分您的实际数据项中的 price_qty 和 <div ng-repeat="qty in price_qty"> 中的那个如果在您的代码中 sn-p price_qty 是一个数组，@987654327 如何@ 工作完美？
其实tier_price是一个数组，price_qty是数组下对象的一部分。我已经更新了我的 ng-repeat 答案，请回顾一下
@sduduzogumede 请再看看上面...
好吧，让我试一试
@sduduzogumede 谢谢兄弟

标签： angularjs angularjs-ng-repeat

【解决方案1】：

好的，去吧！首先，我很难理解你想要达到的目标，所以我希望这接近于回答你。显示ng-repeat 元素并在给定表达式中隐藏它们的最灵活的方法是使用自定义过滤器。下面的代码显示了一个简单的示例。

还可以查看docs 和这个answer here

 <body ng-app="app">
  <div ng-controller="MyCtl">
    <input type="text" ng-model="count"> <!--to get my count.-->
    <div ng-repeat="qty in tier | MyFilter:count">buy {{ qty.p_qty }} more and get price of RM{{ qty.price }}</div>
  </div>

  <script src="./node_modules/angular/angular.js"></script>
  <script>
    angular.module('app', [])
    .controller('MyCtl', ['$scope', function ($scope) { //Simple controller to hold values
      $scope.count = 0; //
      $scope.tier = [ // Took from your question
        { price: "29.0000", p_qty: 1},
        { price: "28.5000", p_qty: 2},
        { price: "28.0000", p_qty: 4},
        { price: "27.1500", p_qty: 6}
      ];
    }])
    .filter('MyFilter', function () { This is where the magic happens!
      return function (items, count) { // items is the ng-repeat array or object
//count is the argument passed to the filter
        console.log(count);
        var filtered = []; // To hold filtered items.
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          if (item.p_qty > count) { // Check if my quantity is greater than count, if so, add item to filtered array
            filtered.push(item);
          }
        }
        return filtered; // Elements/items to be repeated
      };
    });
  </script>
</body>

【讨论】：

应该只通过 HTML 进行控制，没有 JAVASCRIPT 控制器，因为我无权访问这些
但是 AngularJS 是 javascript
实际上我无法访问 Angular 控制器，因为结果已经在 HTML 端，所以我必须相应地操作数据。
嗨@sduduzo，您的解决方案看起来不错，但是如果（count
那么这取决于您的解决方案以及您希望它如何。您将在过滤器中定义所有逻辑

【解决方案2】：

试试这个

<div ng-repeat="qty in model.selected.tier_price">

<div ng-show="count == qty.price_qty">
 Matching Items (This is working perfect)
</div> 

<div ng-show="count < qty.price_qty">
 HERE i am facing issue as when the Count is below price_qty, and it needs   to be stay in same INDEX as well, not really sure what should be other if-condition beside above if-condition. 

  Let say if you Take Count==3, you will see 3 not exist in price_qty[], So first if-Condition will be false and it will jump inside this condition because 3<4 and Index==2, next also same 3<6 and Index==3
</div>

<div ng-show="count > qty.price_qty">
 When Count is More than price_qty
</div>

【讨论】：

对不起，上面的行不通，因为在某个级别停止是额外的 if 条件的问题
你可以回顾一下代码，我刚刚更新了但仍然不正确。但这是我需要解决的方法。

【解决方案3】：

看到上面的图片后更新。

在controller.js中

$scope.myArr = [];
$scope.checkAndValidate = function (type) {
  let tier = model.selected.tier_price.find(t => t.price_qty === $scope.count);
  if (type === 'ADD') {
    if (tier) {
      $scope.myArr.push({ 
        count: $scope.count, 
        description: `Buy ${$scope.count} more and unlock special price of RM${tier.price_qty} per unit.` }
      );
    } else {
      if ($scope.count === 3) {
        //set tier for count == 3 by selecting where price is 28.5
        tier = model.selected.tier_price.find(t => t.price_qty === 1);
        $scope.myArr.push({ 
          count: $scope.count, 
          description: `Buy ${$scope.count} more and unlock special price of RM${tier.price_qty} per unit.` }
        );
      }
    }
  } else if (type === "SUBTRACT") {
    //remove from the array 
    // check first if record exist in array otherwise it will throw an error on splice.
    tier = $scope.myArr.find(t => t.count === $scope.count)
    if(trier) {
       $scope.myArr.splice(($scope.count - 1), 1);
    }
  }
}

$scope.$on('[MyAddbtnEvent]', function () {
  $scope.count++;
  $scope.checkAndValidate('ADD');
});

$scope.$on('[MySubtractBtntEvent]', function () {
  $scope.count = $scope.count - 1;
  $scope.checkAndValidate('SUBTRACT');
});

在.html中

<div ng-repeat="tier in myArr">
   {{myArr.description}}
</div>

仔细尝试上面的逻辑/代码，它应该适合你。您也可以轻松调试

【讨论】：

@NuruSalihu 一旦我在控制器中输入上述代码 [let tier = model.selected.tier_price.find(t => t.price_qty === $scope.count);] 它给出错误？ ??
@Crumby 今晚在上面的链接上聊天。