Question

我试图用各种选项过滤json数据（比如使用滑块和一些单选按钮）。我没有用单选按钮过滤掉，因为我不知道如何过滤那些？

使用单选按钮选项：如果我单击：“First Val: >=50”，则表格数据应仅针对“Value 1”大于或等于50的表格数据进行过滤/显示（{{ 1}}）和第二个选项类似：如果我点击：“>=50”，那么表格数据应该仅针对“Second Val: >=100”大于或等于100的表格数据进行过滤/显示（ Value 2），但我无法得到它。

有人可以帮帮我吗？提前致谢。创建了Fiddle。

HTML：

>=100

JS：

<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>
    &nbsp;
    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>

Answer 1

您可以使用多个过滤器来实现此目的。

Fiddle

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

我将单选按钮分组以一次选择一个按钮，您可以在那里拥有自己的逻辑。

如何使用AngularJS使用单选按钮过滤json数据？

1 个答案: