我有2个来自服务器的独立json对象。下面的Json A是一个Car模型对象,当您查看汽车时会获取。 Json B是元数据,当网页首次加载时,它会在整个应用程序中使用。

我需要做的是在wheel_id上执行ng-repeat时在wheel_handlers上进行查找,以便它从json B返回wheel对象,然后可以在视图中使用它并打印结果。我认为我需要对ng-repeat做些事情,但我不确定自己是否诚实。

A-汽车模型

[{
  id: 14,
  name: "Audi",
  wheel_handlers: [
  {
    id: 9,
    wheel_id: 62,
    arguments: {
      amount: 10
    }
  }
  ]
}]


B轮

{
  id: 62,
  name: "Change Wheel Size",
  arguments: [
  {
    id: 25,
    description: "amount"
  }
  ]
}

最佳答案

我假设以下情况:杰森“ A”可能包括多辆汽车,但也有几辆wheel_handlers(因为在wheel_handler处有一个数组)。因此,汽车的JSON也可能如下所示:

[
    {
        id: 14,
        name: "Audi",
        wheel_handlers: [
            {
                id: 9,
                wheel_id: 62,
                arguments: {
                    amount: 10
                }
            },
            {
                id: 12,
                wheel_id: 65,
                arguments: {
                    amount: 12
                }
            },
            {
                id: 15,
                wheel_id: 30,
                arguments: {
                    amount: 8
                }
            }
        ]
    },
    {
        id: 16,
        name: "Mercedes",
        wheel_handlers: [
            {
                id: 9,
                wheel_id: 62,
                arguments: {
                    amount: 10
                }
            },
            {
                id: 12,
                wheel_id: 65,
                arguments: {
                    amount: 12
                }
            }
        ]
    }
]


对于JSON文件B,我假设您还意味着一个Array,其中可能包含多个wheel定义。举个例子:

[
    {
        id: 62,
        name: "Change Wheel Size",
        arguments: [
            {
                id: 25,
                description: "amount"
            }
        ]
    },
    {
        id: 65,
        name: "test wheel",
        arguments: [
            {
                id: 25,
                description: "amount"
            }
        ]
    },
    {
        id: 30,
        name: "another wheel",
        arguments: [
            {
                id: 25,
                description: "amount"
            }
        ]
    }
]


如果是这种情况,您可以遍历汽车,并在迭代时调用AngularJS控制器中的辅助函数。您调用此辅助函数,并将当前汽车的wheel_handlers作为参数。然后,此辅助函数会检查每个wheel_id条目的wheel_handler并在JSON b文件(车轮定义)中搜索这些ID。辅助函数返回一个包含轮子的数组,因此在视图中可以迭代轮子。这将使用嵌套的ng-repeat,因为首先您要遍历汽车,而要遍历汽车则要遍历车轮。

这是控制器部分的示例。我使用$scope.cars作为JSON A,使用$scope.wheels作为JSONB。

var testApp = angular.module('testApp', []);

testApp.controller('testContr', function ($scope) {
    $scope.cars = [];
    $scope.wheels = [];

    $scope.getWheelsByIds = function (wheel_handlers) {
        var wheelIds = [];
        var returnArray = [];

        for (var wheelKey in wheel_handlers) {
            wheelIds.push(wheel_handlers[wheelKey].wheel_id);
        }

        for (var key in $scope.wheels) {
            console.log(wheelIds.indexOf($scope.wheels[key].id));
            if (wheelIds.indexOf($scope.wheels[key].id) > -1) {
                returnArray.push($scope.wheels[key]);
            }
        }

        return returnArray;
    }
});


必要的HTML部分可能如下所示:

<div ng-app="testApp" ng-controller="testContr">
    <div ng-repeat="car in cars" ng-init="wheels = getWheelsByIds(car.wheel_handlers)">
        <span>Car name: {{car.name}}</span><br/>
        <div ng-repeat="wheel in wheels">
            <span>Wheel name: {{wheel.name}}</span><br/>
        </div>
        <br/>
        <br/>
    </div>
</div>


我用测试数据创建了一个小提琴演示,请在此处查看:http://jsfiddle.net/4F3YD/10/

关于javascript - AngularJS-在ng-repeat中获取对象,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24886619/

10-12 00:04
查看更多