Question

我使用angular.js和指令angucomplete-alt让用户搜索并选择文章。通过此选择，将通过http-post-request从数据库中获取内容。但现在我不知道如何将结果放入主容器中。

所以我必须使用template.html并将响应连接到模板并将所有内容放入<main>。我该怎么做？

HTML：

<main id="target">
    <div>Any content</div>
    <div id="searching" ng-controller='search'>
        <div angucomplete-alt id="s1" selected-object="select" remote-url="search.php?q=" remote-url-data-field="results" title-field="title" description-field="description"></div>
    </div>
</main>

angular.js：

app.controller('search', ['$scope', '$http',
    function s1($scope, $http) {

        $scope.select = function(selected) {
            if (selected) {
                /* Now get the info */
                $http({
                    method: 'POST',
                    url: "script.php",
                    data: { title: selected.title },
                    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
                })
                .success(function (response) {
                    console.log(response);
                    /* put the response connected with template.html into main-container */
                });
            }
        };

    }
]);

更新

也许我想错了......但这是我的概念：

在主容器的开头有搜索框。如果用户正在搜索文章，请求的结果会给我一个json数组。

此数组的内容应该在模板文件中合并，如下所示：

template.html

<div>{{name}}</div>
<section>{{content}}</section>

......等等。所以JSON结果现在在模板文件中。这个完整的结果应放入主容器中 - 这意味着搜索框正在被替换。

结果将是：

结果：

<main id="target">
    <div>Layla</div>
    <section>Layla is a beautiful girl.</section>
</main>

Answer 1

你可以尝试这样的事情：

的 JS
在控制器中添加数组var：var $scope.myNeeds= [];
然后填写你的要求

.success(function(response) { for(var number in response) $scope.myNeeds.push(response[number]); });

然后在 HTML 中（不要忘记用ng-repeat重复所需的div）

<main id="target" ng-controller="search"> <div ng-repeat="myNeed in search.myNees"> <div>{{myNeed.name}}</div> <div>{{myNeed.content}}</div> </div> <div id="searching" ng-controller='search'> <div angucomplete-alt id="s1" selected-object="select" remote-url="search.php?q=" remote-url-data-field="results" title-field="title" description-field="description"></div> </div> </main>

如果您有这样的JSON，此代码将起作用：

[ { "name":"First part", "content":??? /*a string or an array, depends on what you want*/ }, { "name":"Second Part", "surname":??? /*a string or an array, depends on what you want*/ } ... ... ]

但我允许您更改HTML＆amp;中的代码在你的JSON中得到你想要的东西！

angular.js：如何将数据从JSON放到模板中，结果放到主网站？

1 个答案: