AngularJS ng-repeat XML 属性

Question

处理我的第一个 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;
        });
    }
});

Answer 1

尝试使用 $index 而不是 0

<body ng-app="productsApp">
<div ng-controller="products"><ol><h2 ng-repeat="product in products ">
    {{product.student[$index]._name}}
</div>

$index 将为您提供产品的当前索引。

Answer 2

你可以做嵌套的 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>

查看此 plunk 示例

http://plnkr.co/edit/kXu4PEuSmCGju7mElpm2?p=preview

Answer 3

我只需要将我的 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>

只是不知道如何正确使用嵌套。感谢大家！

AngularJS ng-repeat XML 属性

AngularJS ng-repeat for XML attributes

javascript

xml

angularjs

ng-repeat

angularjs-ng-repeat