Question

我试图将常规手风琴的标签客观化......但它似乎没有用。我没有使用过这项技术，所以我是一个初学者。你能看看并帮帮我吗？谢谢。这是代码：

<div id="dashboard-learn-knowledge-wrapper">

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" ng-controller="PostsController as learnCtrl">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab">
                <h class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        {{item.title}}
                    </a>
                </h>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in  col-md-8 col-sm-8 " role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <p>{{item.content}}</p>
                    <a class="pull-left" href="#">
                        <img class="media-object pull-right" ng-src="{{item.photo}}">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

的javascript：

angular.module('DashboardLearn', ['ui.bootstrap'])
    .controller('DashboardLearnCtrl', function () {
        var item=this;
        item= [
            {
                'title': 'A',
                'content': "Lorem ipsum ",
                'photo': "http://placekitten.com/g/150/150"
            }
            ];
    });

Answer 1

一些错误，

Here is a working jsfiddle

首先，需要将$ scope传递给控制器，以便您可以将项目传递给它（并且视图可以访问项目）。 Item是一个对象（所以我从数组中交换它），如果你想把它作为一个对象，它将是这样的：

$scope.items= [
        {
            'title': 'A',
            'content': "Lorem ipsum ",
            'photo': "http://placekitten.com/g/150/150"
        }, 
        { 
            'title': 'B',
            'content': "Lorem ipsum B ",
            'photo': "http://placekitten.com/g/151/151"
        }
        ];

你可以在你的html中使用ng-repeat。

此外，控制器被命名为PostsController而不是DashboardLearnCtrl

我如何客观化标签手风琴？

1 个答案: