Question

我正在尝试使用Bootstrap手风琴，以便在单击按钮时展开一段文本。数据是从JS文件（Angular）中提取的，但是，我似乎无法想象如何根据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'
    },

我可以正确显示每个条目的网址，图片，标题，但{{id}}或{{i.id}}的相同应用程序似乎与data-target和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值设置为字符串，但HTML会将id呈现为int而不是字符串，因此您希望在语句中添加文本，这样它就更明确，您可以避免出现问题＆＃34;为什么我的ID工作不正常？＆＃34;

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">

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

2 个答案: