我正在尝试使用各种选项来过滤json数据(例如使用滑块和一些单选按钮)。我无法通过单选按钮进行过滤,因为我不知道如何使用单选按钮进行过滤?
使用单选按钮选项:如果单击:“ First Val: >=50
”,则仅应过滤/显示其“ Value 1
”大于或等于50(>=50
)的表数据,对于第二个选项类似:如果单击:“ Second Val: >=100
”,则表数据仅应过滤/显示其“ Value 2
”大于或等于100(>=100
),但我无法获取。
任何人都可以帮我一下吗?提前致谢。创建小提琴。
的HTML:
<body ng-controller='TestCtrl'>
<slider floor="0" ceiling="50" ng-model-low="low_marks" ng-model-high="high_marks"></slider>
low_marks: <strong>{{low_marks}}</strong>
high_marks: <strong>{{high_marks}}</strong>
<hr>
<label>>=50<input type="radio" name="value1" ng-model="type" value='value1' ></label><br><br>
<label>>=100<input type="radio" name="value2" ng-model="type" value='value2' ></label><br><br>
<table border="1">
<thead>
<th>Name</th>
<th>Low Marks</th>
<th>High Marks</th>
<th>Value 1</th>
<th>Value 2</th>
</thead>
<tbody>
<tr ng-repeat='item in items|filter:marksrange'>
<td>{{item.name}}</td>
<td>{{item['minmarks']}}</td>
<td>{{item['maxmarks']}}</td>
<td>{{item.value1}}</td>
<td>{{item.value2}}</td>
</tr>
</tbody>
</table>
</body>
js:
var app = angular.module('marks', ['uiSlider']);
app.controller('TestCtrl', function ($scope){
$scope.items = [{name: "name1", "minmarks": "35",
"maxmarks": "100", "value1": "50", "value2": "100"},
{name: "name2", "minmarks": "50",
"maxmarks": "80", "value1": "100", "value2": "150"},
{name: "name3", "minmarks": "70",
"maxmarks": "90", "value1": "25", "value2": "50"}];
$scope.low_marks = 0;
$scope.high_marks = 100;
$scope.marksrange = function(item) {
return (parseInt(item['minmarks']) >= $scope.low_marks && parseInt(item['maxmarks']) <= $scope.high_marks);
};
});
您可以使用多个过滤器来实现此目的。
<input type="radio" name="value" ng-model="value1" value='50' > First Val: >=50<br><br>
<input type="radio" name="value" ng-model="value2" value='100' > Second Val: >=100<br><br>
<tr ng-repeat='item in items|filter:priceRange|filter:valueRange'>
<td>{{item.name}}</td>
<td>{{item['minmarks']}}</td>
<td>{{item['maxmarks']}}</td>
<td>{{item.value1}}</td>
<td>{{item.value2}}</td>
</tr>
控制器:
$scope.valueRange = function(item) {
if($scope.value1 > 0) {
return (parseInt(item['value1']) >= $scope.value1);
}
else if($scope.value2 > 0) {
return (parseInt(item['value2']) >= $scope.value2);
}
else {
return item;
}
};
我将单选按钮分组以一次选择一个按钮,您可以在那里拥有自己的逻辑。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句