Question

我创建了一个有角度的网络应用程序，在侧边栏中列出了不同的汽车，并在信息框中列出了有关特定汽车的一些信息。

目的是在点击不同的汽车时在框中显示正确的信息。

我有两个不同的数组（两个API端点），第一个数组列出了汽车名称，另一个获得了汽车的信息。但我不知道如何将对象与主键和外键连接，以及我在点击汽车后如何输出正确的信息。

app.js：

angular.module('myApp', [])
.controller('MyController', function($scope, $http) {

    function fetch() {

        $http({method : 'GET',url : 'http://*cars*'})
            .success(function(data) {
                $scope.cars = data;
            });

        $http({method : 'GET',url : 'http://*information*'})
            .success(function(data) {
                $scope.information = data;
            });

    }

    fetch();

})

HTML：

<div id="sidebar">

            <ul>

                <li ng-repeat="name in cars"><a href="#">{{ name.displayName }}</a></li>

            </ul>

</div>

现在我所做的就是我已经获取了数据并输出侧边栏中的汽车。但是现在我一直在谷歌搜索并试图用循环和功能将汽车连接到信息上几个小时，但是仍然无能为力。

是的，我是新手。任何形式的帮助都会很棒！感谢

Answer 1

您可以使用ng-route处理此问题。你可以这样做：

在路线定义中：

.when(/cars/:Id), {
            name: 'cars',
            templateUrl : 'ayourtemplate.html',
            controller : 'yourCtrl'
        })

在你的HTML中：

<div id="sidebar">
    <ul>
        <li ng-repeat="name in cars"><a href="cars/1515">{{ name.displayName }}</a></li>
    </ul>
</div>

您的关键功能只需匹配$ scope.information中的正确密钥

Answer 2

这取决于这些数组包含的信息。如果你确定每个元素都与其他元素相对应，那么你可以在html中使用$index。

<li ng-repeat="name in cars">
    <a href="#">{{ name.displayName }}</a>
    <p>{{ information[$index] }}</p>
</li>

但是，如果数组中的元素没有排序，则必须检查数组中对象的主键。让我们假设，数组中的数据如下所示：

cars:
[
    { id: "1", name: "Carrera GT" },
    { id: "2", name: "DB 11" },
... and so on
]

information:
[
    { id: "2", info: "Lorem ipsum" },
    { id: "1", info: "Dolor sit amet" }, 
...
]

然后我建议使用循环并使用id构建新数组。

    var carinfo = [];
    cars.forEach(car => {
        obj["id"] = car.id;
        obj["name"] = car.name;
        obj["info"] = ""; // Placeholder

        info.forEach(c => {
            if (c.id === car.id) {
                obj["info"] = c.info;
            }
        });

        carinfo.push(obj);
    });
    $scope.carInfo = carinfo;

然后你可以在html文件中使用$scope.carInfo。

<li ng-repeat="car in carInfo">
    <a href="#">{{ car.name }}</a>
    <p>{{ car.info }}</p>
</li>

Angular，连接对象并显示正确的信息

2 个答案: