在 angularjs 中，将复选框和单选按钮分组

Question

由于我是 angularjs 的新手，因此在 angularjs 中询问这种 UI 设计的方法。我有两个单选按钮，每个单选按钮都有相应的容器 UI，其中有 3 个复选框。

我已附上截图供参考。

当我点击水果时，只有水果复选框应该可见，当我点击蔬菜时，只有蔬菜复选框应该可见。

我不确定它是如何开始的……使用桌子或其他东西。 小示例代码我可以继续进行

谢谢

Answer 1

您可以在显示列表时使用 ng-repeat 中的过滤器：

<div ng-app>
  <div ng-controller="TodoCtrl">
    <div class="radioGroup">
      <input type="radio" name="option" ng-model="selectedOption" value="Fruit"/>Fruit 
      <input type="radio" name="option" ng-model="selectedOption" value="Vegetable"/>Vegetable
    </div>

    <div class="checkboxgroup">
      <div class="list" ng-repeat="obj in checkboxlist | filter: {category: selectedOption}">
        <input type="checkbox" ng-model="obj.selected"/> 
        {{obj.name}}
      </div>
    </div>
  </div>
</div>

function TodoCtrl($scope) {
    $scope.selectedOption = "Fruit";
  $scope.checkboxlist = [
    {name: 'Tomato', category: 'Vegetable'},
    {name: 'Potato', category: 'Vegetable'},
    {name: 'Onion', category: 'Vegetable'},
    {name: 'Apple', category: 'Fruit'},
    {name: 'Orange', category: 'Fruit'},
    {name: 'Mango', category: 'Fruit'}
  ]
}

您可以查看演示here。