javascript - Angular - {{}} 未在 ng-model 属性标记中解析

Question

我正在尝试向我的网站动态添加一些复选框，并根据它们的值进行过滤。

我在通过 ng-model 将每个过滤器添加到过滤器对象的部分失败了。

<div ng-repeat="filter in menu.filters">
    <label>{{filter.title}}</label>
    <input type="checkbox" ng-model="filters.filter{{$index+1}}" ng-true-value="{{filter.stub}}" ng-false-value='' />
</div>

但是 {{$index+1}} 或者实际上在 ng-model 属性中使用 {{}} 会破坏整个循环。

我错过了什么？

这是页面的完整代码:

<script type="text/ng-template" id="menu_item_renderer.html">
    {{category.title}}
    <ul class="global-menu-category-list">
        <li ng-repeat="category in category.categories | filter:filters" ng-include="'menu_item_renderer.html'"></li>
    </ul>
    <ul class="global-menu-link-list">
        <li ng-repeat="link in category.links | filter:filters">
            <a href="{{link.link}}">{{link.title}}</a>
        </li>
    </ul>
</script>

<form>
    <div ng-repeat="filter in menu.filters">
        <label>{{filter.title}}</label>
        <input type="checkbox" ng-model="filters.filter($index+1)" ng-true-value="{{filter.stub}}" ng-false-value='' />
    </div>
</form>

<div id="#global-menu" data-feature="globalMenu">
    <ul id="global-menu-categories">
        <li ng-repeat="category in menu.categories" ng-include="'menu_item_renderer.html'"></li>
    </ul>
</div>

目标是让复选框过滤菜单项。

模型如下:

'menu' = {
   'filters': [
      {
         'title': 'Unified Communications',
         'stub': 'unified communications',
         'turnedOn': false
      },
      {
         'title': 'News',
         'stub': 'news',
         'turnedOn': false
      },
      {
         'title': 'Events',
         'stub': 'events',
         'turnedOn': false
      }
   ],

   'categories': [
      {
         'title': 'News, Events & Updates',
         'categories': [
            {
               'title': 'Top Stories',
               'links': [
                  {
                     'title': 'News Archives',
                     'link': 'news/archives'
                  },
                  {
                     'title': 'News Subscriptions',
                     'link': 'news/subscriptions'
                  },
                  {
                     'title': 'News Submissions',
                     'link': 'news/submissions'
                  }
               ]
            },
            {
               'title': 'Upcoming Events',
               'links': [
                  {
                     'title': 'Past Events',
                     'link': 'events/past'
                  }
               ]
            }
         ],
         'links': [
            {
               'title': 'Competitive News',
               'link': '/news/competitive',
            },
            {
               'title': 'Leader Communications',
               'link': '/leader_communications',
            },
            {
               'title': 'Partner Regional News and Updates',
               'link': '/news/partner_regional',
            },
            {
               'title': 'Recent Updates',
               'link': '/news/recent',
            }
         ]
      }
   ] 
};

Answer 1

一个选项是在 JavaScript 中构建一个包含所有过滤器的模型，并且在每个过滤器上都有一个“turnedOn”属性。然后将该属性绑定(bind)到每个复选框。

$scope.filterList = [
    {title: "title1", turnedOn: false}
]

<div ng-repeat="filter in filterList ">
    <label>{{filter.title}}</label>
    <input type="checkbox" ng-model="filter.turnedOn" />
</div>

然后使用filterList 生成您的过滤器对象。