ng-repeat with if else Conditions Angularjs (Front-End [HTML] part)

问题

Looking for solution

Actual Data

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

Here are my inputs

price_qty = [1,2,4,6] Note: Array is Dynamic

$index = [0,1,2,3] Note: Index is depend on Array Size

count = 1 to onward (Will Manually increase by Click on Button)

Note: below code will run 4 times as each time Count increase e.g [1,2,4,6]

And also Once Condition match it further should NOT check other conditions, kind of break statement

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

below is what actually i want to achieve

Buy 1, Buy 3, Buy 5 are my Counts

回答1:

Ok here goes! Firstly I had a hard time understanding what you were trying to achieve so I hope this comes close to answering you. The most flexible answer to showing ng-repeat elements and hiding them from a given expression is through use of a custom filter. Code below shows a simple example.

Also check out the docs and this 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>

回答2:

Try this

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

回答3:

Update after seeing the pic above.

In 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');
});

in .html

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

Try the above logic/code carefully, it should work for your. You will be able to debug easily also

来源：https://stackoverflow.com/questions/49525010/ng-repeat-with-if-else-conditions-angularjs-front-end-html-part

标签

angularjs

angularjs-ng-repeat