使用我的第一个AngularJS项目并遇到了一个问题。我正在使用XML,我使用x2js成功转换为JSON。
我只想显示学生姓名:" ed frank jimmy sally"
我目前的代码只是输出" ed jimmy"因为我只是访问student[0]._name
。如何使用ng-repeat?
XML
<school>
<teacher name="williams">
<student name="ed"/>
<student name="frank"/>
</teacher>
<teacher name="ramos">
<student name="jimmy"/>
<student name="sally"/>
</teacher>
</school>
JSON
{
"school": {
"__cnt": 5,
"teacher": [
{
"__cnt": 6,
"student": [
{
"__cnt": 1,
"_name": "ed"
},
{
"__cnt": 1,
"_name": "frank"
}
],
"student_asArray": [
{
"__cnt": 1,
"_name": "ed"
},
{
"__cnt": 1,
"_name": "frank"
}
],
"_name": "williams",
"__text": [
"\n\t\t\t",
"\n\t\t\t",
"\n\t\t"
]
},
{
"__cnt": 6,
"student": [
{
"__cnt": 1,
"_name": "jimmy"
},
{
"__cnt": 1,
"_name": "sally"
}
],
"student_asArray": [
{
"__cnt": 1,
"_name": "jimmy"
},
{
"__cnt": 1,
"_name": "sally"
}
],
"_name": "ramos",
"__text": [
"\n\t\t\t",
"\n\t\t\t",
"\n\t\t"
]
}
],
"teacher_asArray": [
{
"__cnt": 6,
"student": [
{
"__cnt": 1,
"_name": "ed"
},
{
"__cnt": 1,
"_name": "frank"
}
],
"student_asArray": [
{
"__cnt": 1,
"_name": "ed"
},
{
"__cnt": 1,
"_name": "frank"
}
],
"_name": "williams",
"__text": [
"\n\t\t\t",
"\n\t\t\t",
"\n\t\t"
]
},
{
"__cnt": 6,
"student": [
{
"__cnt": 1,
"_name": "jimmy"
},
{
"__cnt": 1,
"_name": "sally"
}
],
"student_asArray": [
{
"__cnt": 1,
"_name": "jimmy"
},
{
"__cnt": 1,
"_name": "sally"
}
],
"_name": "ramos",
"__text": [
"\n\t\t\t",
"\n\t\t\t",
"\n\t\t"
]
}
],
"__text": [
"\n\t\t",
"\n\t\t",
"\n"
]
}
}
HTML
<body ng-app="productsApp">
<div ng-controller="products">
<h2 ng-repeat="product in products ">
{{product.student[0]._name}}
</h2>
</div>
</body>
JS
var productApp = angular.module('productsApp',[]);
productApp.factory('productFactory',function($http){
var factory = [];
factory.getProducts = function(){
return $http.get("js/allProducts.xml");
}
return factory;
});
productApp.controller('products',function($scope,productFactory){
$scope.products = [];
loadProducts();
function loadProducts(){
productFactory.getProducts().success(function(data){
schools = x2js.xml_str2json(data);
console.log(schools.school.teacher);
$scope.products =schools.school.teacher;
});
}
});
答案 0 :(得分:1)
我只需将我的HTML更改为:
<body ng-app="productsApp">
<div ng-controller="products">
<div ng-repeat="product in products">
<div ng-repeat="teacher in product.student " style="color:red;">
{{teacher._name}}
</div>
</div>
</div>
我只是不知道如何正确使用嵌套。谢谢大家!
答案 1 :(得分:0)
你可以做嵌套的ng-repeats。例如
如果您的数据如下所示:
$scope.data = {
"school":{
"teacher":[
{
"student":[
{
"_name":"ed"
},
{
"_name":"frank"
}
],
"_name":"williams"
},
{
"student":[
{
"_name":"jimmy"
},
{
"_name":"sally"
}
],
"_name":"ramos"
}
]
}
};
您可以访问该结构中的任何属性,如下所示:
<div ng-repeat="teacher in data.school" style="background: red; width: 100%">
<div ng-repeat="students in teacher" style="background: yellow; width: 90%">
<!--Prints each object in the teacher array -->
{{students}}
<div ng-repeat="student in students" style="background: lightblue; width: 80%">
<!--Prints each object in the student array -->
{{student}}
<div ng-repeat="details in student" style="background: green; width: 80%">
<!--Prints the name of each student -->
{{details._name}}
</div>
</div>
</div>
</div>
请参阅此插件以获取示例
答案 2 :(得分:-2)
尝试$ index而不是0
<body ng-app="productsApp">
<div ng-controller="products"><ol><h2 ng-repeat="product in products ">
{{product.student[$index]._name}}
</div>
$ index将为您提供产品的当前索引。