我有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/