Question

我有这个数据结构，搜索：

{
    id: '1',
    name: 'Foo'
    service_ids:
    [
        3,
        8,
        12
    ]
}

然后我有另一个数据结构服务，它与上面的service_ids中的id匹配，如下所示：

[
    {
        id: 3,
        name: 'Fighter'
    },
    {
        id: 4,
        name: 'Typhoon'
    },
    {
        id: 8,
        name: 'Kung'
    },
    {
        id: 12,
        name: 'Builder'
    }
]

我想使用AngularJS在表单中显示它。这个名字很好。我希望将所有可能的服务显示为复选框，如果搜索中选中了其中一项服务，则会在复选框中打勾。类似的东西：

<li ng-repeat="search in searches">
    <input ng-model="search.name">
    <ul>
        <li ng-repeat="service in services">
            <input type="checkbox">
            {{service.name}}
        </li>
    </ul>
</li>

我不知道如何将该复选框链接到service_ids和服务。任何帮助表示赞赏。

我正在使用$ resource。

Answer 1

<强>更新

忽略我的回答，误读你的嵌套请求。

如果有人需要筑巢指导，请参阅以下内容：

我找到的以角度嵌套的最佳方法是创建一个知道像这样的子项的模板：

<script type="text/ng-template"  id="tree_item_renderer.html">
 <span>{{tag.Name}}</span>
   <ul ng-show="tag.Children.length > 0">
        <li ng-repeat="tag in tag.Children" ng-include="'tree_item_renderer.html'" ></li>
   </ul>
</script>

<ul class="tag-list">
      <li ng-repeat="tag in tags" ng-include="'tree_item_renderer.html'" ></li>
 </ul>

Answer 2

如果我理解你的问题，它应该像以下一样简单：

<input type="checkbox" ng-model="search.service_ids[service.id]">

你也应该得到双向绑定。

<强>更新

刚才意识到search.service_ids是一个数组而不是一个地图。所以上面的解决方案并不准确。您可能希望使用过滤器：

<input type="checkbox" ng-checked="search.service_ids | contains:service.id">

然后

filter('contains', function() {
    return function(haystack, needle) {
        return haystack.indexOf(needle) >= 0;
    }
});

带有外部选项的AngularJS资源中的嵌套复选框

2 个答案: