javascript - 嵌套 ng-repeat 在 <input> 内不起作用

Question

我有一个 $scope 参数，如下所示:

$scope.filters = [{name: "Brands", brands: ['Brand1', 'Brand2', 'Brand3']}, 
                 {name: "Catalogs", brands: ['Cat1', 'Cat2', 'Cat3']}];

在 html 文件中，我尝试将其显示为如下列表:

<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
            <input type="checkbox" ng-repeat="brand in filter.brands"> {{brand}}<br>
        </div>

filter.name 有效，正如我看到的“Brands” 和 “Catalogs”，但在它们下面我看到空的复选框。 让它工作的唯一方法是从输入中取出 ng-repeat 并将其放在标签或其他东西的外面。
我在这里遗漏了什么吗？

Answer 1

像这样

var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
  $scope.filters = [{name: "Brands", brands: ['Brand1', 'Brand2', 'Brand3']}, 
                 {name: "Catalogs", brands: ['Cat1', 'Cat2', 'Cat3']}];
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
     <div  ng-repeat="brand in filter.brands">
        <input type="checkbox" ng-model="brands"> {{brand}}<br>
     </div>
    </div>
  
  </div>