AngularJS和Bootstrap：ng-repeat导致列表丢失格式

Question

我正在尝试使用ng-repeat从数组中检索内容并将其显示在列表中。内容最初是JSON，但在被推入数组之前已经被字符串化了。

问题在于，在bootstrap中，这会导致列表失去格式，如下所示：

虽然，我希望它看起来如此：

以下是我的下拉组件代码：

<li>
    <a ng-controller="appCtrl" href="#">{{greeting.text}}, world</a>
</li>

<div ng-controller="PostsCtrl">
    <li ng-repeat="eachResponse in response.text">
        <a href="#">{{eachResponse}}</a>
    </li>
</div>

<li>
    <a href="#Mytemplate">My dropdown</a>
</li>

我的函数代码将JSON中的数组返回到上面使用的'PostsCtrl'控制器中的response.text：

function parseTheResponse(responsedataJSON) {
    var obj = JSON.parse(JSON.stringify(responsedata));
    var array = [];

    for (var i = 0; i < obj.connectors.length; i++ ){
        stringArray.push(JSON.stringify(obj.connectors[i].name));
    }

    return stringArray;
}

Answer 1

这是因为<div>内<ul>。尝试将ng-controller移至<ul>并删除<div>包装。

如下所示：

<ul ng-controller="PostsCtrl">

    <li>
        <a ng-controller="appCtrl" href="#">{{greeting.text}}, world</a>
    </li>

    <li ng-repeat="eachResponse in response.text">
        <a href="#">{{eachResponse}}</a>
    </li>

    <li>
        <a href="#Mytemplate">My dropdown</a>
    </li>

</ul>

PS。看起来您正在继续使用hello world应用（请查看之前的问题）。干得好！