ng-repeat with if else 条件 Angularjs(前端 [HTML] 部分)
[英] ng-repeat with if else Conditions Angularjs (Front-End [HTML] part)
本文介绍了ng-repeat with if else 条件 Angularjs(前端 [HTML] 部分)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
寻找解决方案
实际数据
tier_price:0:价格:29.0000"价格数量:11:价格:28.5000"价格数量:22:价格:28.0000"价格数量:43:价格:27.1500"价格数量:6
这是我的输入
price_qty = [1,2,4,6] 注意:数组是动态的
$index = [0,1,2,3] 注意:索引取决于数组大小
count = 1 向前(将通过单击按钮手动增加)
注意:每次Count增加时，下面的代码将运行4次例如[1,2,4,6]
而且一旦条件进一步匹配，就不应该检查其他条件，那种break语句
<div ng-if="model.item.count == tier.price_qty">匹配项目(这是完美的工作)
<div ng-if="model.item.count <tier.price_qty &&model.item.count == tier.price_qty+$index-3">/** 遇到这个地方的问题，看来需要再添加一个达到的条件，不知道应该是什么条件因为现在如果我使用 [model.item.count == tier.price_qty+$index-3]直到 Count==4 它工作正常但当 Count==5然后又错了，因为条件不完美**/
<div ng-if="model.item.count > tier.price_qty">当 Count 大于 price_qty 时
下面是我真正想要实现的
买 1、买 3、买 5 是我的心愿
解决方案
好了！首先，我很难理解你想要实现的目标，所以我希望这能接近回答你.显示 ng-repeat 元素并将它们从给定表达式中隐藏的最灵活的方法是使用自定义过滤器.下面的代码展示了一个简单的例子.
另请查看 docs 和这个 在此处回答
<div ng-controller="MyCtl"><input type="text" ng-model="count"><!--计算我的数量.--><div ng-repeat="qty in tier | MyFilter:count">再买 {{ qty.p_qty }} 获得 RM{{ qty.price }} 的价格</div>
<script src="./node_modules/angular/angular.js"></script><脚本>angular.module('app', []).controller('MyCtl', ['$scope', function ($scope) {//保存值的简单控制器$scope.count = 0;//$scope.tier = [//取自你的问题{价格:29.0000"，p_qty:1}，{价格:28.5000"，p_qty:2}，{价格:28.0000"，p_qty:4}，{价格:27.1500"，p_qty:6}];}]).filter('MyFilter', function () { 这就是魔法发生的地方！return function (items, count) {//items 是 ng-repeat 数组或对象//count 是传递给过滤器的参数控制台日志(计数)；var 过滤 = [];//保存过滤的项目.for (var i = 0; i < items.length; i++) {var item = items[i];if (item.p_qty > count) {//检查我的数量是否大于计数，如果是，则将项目添加到过滤数组过滤.推(项目)；}}返回过滤；//要重复的元素/项目};});
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
解决方案
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>
这篇关于ng-repeat with if else 条件 Angularjs(前端 [HTML] 部分)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
