Angular JS：无法在 ng-repeat 中为 ng-model 变量设置值

Question

1. 我的以下代码运行良好。也就是说，它正在显示带有国家名称的组合框，当我在组合框中选择一个国家时，它会打印“过滤数据：”

       <span class="input-group-btn">
           <button type="button" class="btn btn-default" ng-click=""><i class="glyphicon glyphicon-globe"></i>&nbsp;Country</button>
           <select class="form-control" style="width:200px;" ng-model="filters" ng-options="country.name for country in countries"></select>
       </span>
   
       Filter Data: {{filters}}
   
   </div>
   

   在上面的代码中，我使用 ng-init="filters" （而不是通过 Controller ）声明了一个范围变量，并且我试图将选定的组合项设置为这个变量。效果很好。

2. 然后我将上面的代码替换为以下 ng-repeat 代码：

       <span ng-repeat="filter in filterList">
           <button type="button" class="btn btn-default" style="width:75px" ng-click="">{{filter.filterLabel}}</button>
   
           <span ng-switch="filter.filterType">
               <span ng-switch-when="combo"><select class="form-control" style="width:200px" ng-model="filters" ng-options="country.name for country in filter.countryData"></select></span>
           </span>
       </span>
   
       Filter Data: {{filters}}
   
   </div>
   

   上面的代码虽然在组合框中显示了国家名称，但当我选择一个国家时，它不会在“过滤数据”附近显示任何内容。我认为可能是范围变量“过滤器”在 ng-repeat 附近不可见（只是一个猜测），因此也尝试了它也没有工作。

问题：

1. 您能帮我理解为什么 ng-model="filters" 没有设置范围变量 'filters' 并让我打印它吗？

2. 我还想在 ng-model 中动态创建变量名。像 ng-model="filters.{{filter.filterType}}" 这样的东西。我试过了，但从来没有得到任何结果。它没有显示 {{filters}}。在浏览了 Stackoverlow 上的一些帖子后，我尝试了 ng-model="filters.[filter.filterLabel]"。当我在国家组合中选择一个项目时，这实际上是通过一些 JS 错误（说 TypeError: Cannot set property 'Country' of undefined）。似乎无法在过滤器中找到 Country （这是 [filter.filterLabel] 的结果）。因此，我声明 ng-model 的方式显然存在很大问题。

使用上面的代码（我想使用范围变量 ng-init="filters" ），你能帮我正确的方法来为所选项目动态生成 ng-model 变量名称并能够使用{{过滤器}}

更新：

这是演示我的问题的小提琴：http://jsfiddle.net/ramarajuv/ag2crnk7/ 请帮我改正。

提前谢谢大家。

Answer 1

搞定了。

1. 首先，在控制器范围内创建过滤器变量：

   $scope.filters = {
       "Country":{},
       "President of Country":{}
   };
   

2. 然后，将 ng-model 格式化为：

   ng-model="filters[filter.filterMap]