javascript - AngularJS 和 Bootstrap : ng-repeat causing list to lose formatting

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” Controller 中的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应用程序(看看你之前的问题)。干得好!