使用AngularJS将div ID设置为动态ID

Question

我正在尝试使用Bootstrap手风琴来允许单击按钮时展开一段文字。 数据是从JS文件（角度）提取的，但是，我似乎无法弄清楚如何根据JS文件设置div ID。

HTML：

    <li ng-repeat="i in items | searchFor:searchString">
        <a href="{{i.url}}"><img ng-src="{{i.image}}" /></a>
        <p>{{i.title}}</p>
        <button type="button" class="btn btn-desc btn-lg pull-left" data-toggle="collapse" data-target="{{i.id}}">Expand Description/Output</button>
        <div id="{{i.id}}" class="collapse">
        <p>{{i.desc}}</p>
    </div>
    </li>
</ul>

这是JS：

$scope.items = [
    {
        id: '1',
        url: 'http://google.com',
        title: 'Google',
        image: 'http://google.com/image.png',
        desc: 'Information about Google'
    },
    {
        id: '2',
        url: 'http://duckduckgo.com',
        title: 'Duck Duck Go',
        image: 'http://duckduckgo.com/image.png'
        desc: 'Information about Duck Duck Go'
    },

我可以正确显示url，图像，标题的每个条目，但是{{id}}或{{i.id}}的相同应用程序似乎对数据目标和div id无效。 我看过其他Stack项目，但似乎无法从它们中退回。

Answer 1

首先：在您的列表项中，您要对searchFor进行过滤，即

<li ng-repeat="i in items | searchFor:searchString">

应该

<li ng-repeat="i in items | filter:searchText">

其次：您不能将id设置为整数，为什么不尝试使用：

<a href="{{'item-' + i.url}}"><img ng-src="{{i.image}}" /></a>

这样，您的字符串仍然具有您的id值。 尽管您的范围默认情况下将int值设置为string，但HTML会将id呈现为int而不是字符串，因此您希望将文本添加到语句中，这样更加确定，可以避免出现“为什么不是”的问题我的身份证在工作吗？”

Answer 2

尝试将中继器的$ index设置为ID

<button type="button" class="btn btn-desc btn-lg pull-left" data-toggle="collapse" data-target="{{$index}}">Expand Description/Output</button>
 <div id="{{$index}}" class="collapse">