Javascript 使用angular在不同的divs html中加载更多.json

我有一个div，它用angular.js从.json文件加载内容

代码如下：

<div class="pbox" id="div1">
    <div ng-app="" ng-controller="customersController">

        <ul>
            <li ng-repeat="x in names">
                {{ x.Name}}
            </li>
            <li ng-repeat="x in names">
                {{ x.Details}}
            </li>
            <li ng-repeat="x in names">
                {{ x.Composizione}}
            </li>
            <li ng-repeat="x in names">
                {{ x.moreDetails}}
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo1}}"/>
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo2}}"/>
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo3}}"/>
            </li>
            <li ng-repeat="x in names">
                <img ng-src="{{x.photo4}}"/>
            </li>
        </ul>

    </div>
    <script>
        $scope.names = {}
        function customersController($scope, $http) {

            $http.get("assets/data/five.json")

                    .success(function (response) {
                        $scope.names = response;
                    });

        }
    </script>
</div>

<div class="pbox" id="div2">
    <div ng-app="" ng-controller="customersController">

        <ul>
            <li ng-repeat="x in names_two">
                {{ x.Name}}
            </li>
            <li ng-repeat="x in names_two">
                {{ x.Details}}
            </li>
            <li ng-repeat="x in names_two">
                {{ x.Composizione}}
            </li>
            <li ng-repeat="x in names_two">
                {{ x.moreDetails}}
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo1}}"/>
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo2}}"/>
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo3}}"/>
            </li>
            <li ng-repeat="x in names_two">
                <img ng-src="{{x.photo4}}"/>
            </li>
        </ul>

    </div>
    <script>
        $scope2.names_two = {}
        function customersController($scope, $http) {

            $http.get("assets/data/five.json")

                    .success(function (response) {
                        $scope.names_two = response;
                    });

        }
    </script>
</div>

{{x.Name}


{{x.Details}}


{x.Composizione}


{{x.moreDetails}}










$scope.names={}
函数customersController（$scope，$http）{
$http.get（“assets/data/five.json”）
.成功（功能（响应）{
$scope.names=响应；
});
}


{{x.Name}


{{x.Details}}


{x.Composizione}


{{x.moreDetails}}










$scope2.names_two={}
函数customersController（$scope，$http）{
$http.get（“assets/data/five.json”）
.成功（功能（响应）{
$scope.names\u two=响应；
});
}

现在，我不会用相同的字段填充另一个div，而是使用另一个.json的内容，而不是5.json的内容。 有办法做到这一点吗？我试着复制，但第二个不行。

---

谢谢

您可以覆盖

$scope.names

的内容。如果希望在屏幕上同时显示这两个对象，则只需复制粘贴内容，并使用另一个对象名称即可

还应在控制器的开始处启动对象：

$scope.names = {}

这可以防止将来出现bug。您的浏览器比服务器快，因此只有从服务器或本地计算机获取数据后，

$scope.names

才会存在。这将导致错误

您的更新小提琴：

---

我试图复制（我在第一篇文章中编辑了代码），但现在我在第一个div中没有显示任何内容…：（您必须调用第二个scope变量，即$scope.names\u two，而不是$scope2.names；$scope2.something会给您带来错误，因为$scope2在angular中不存在。另外，请定义$scope.names={}在控制器内部，不是以前。我已经编辑过，但没有…不起作用，你确定吗？：）你能为我创建一个JSFIDLE吗？我会看看你的代码。我编辑了添加

和$scope.names\u two=response；但什么都没有。如果我删除第一部作品第二部分的内容，我真的不明白。我试图创建一个小提琴，但我不知道把json。。。