AngularJS ng-repeat用于XML属性

时间:2015-07-14 15:30:38

标签: javascript xml angularjs angularjs-ng-repeat ng-repeat

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

3 个答案:

答案 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>

请参阅此插件以获取示例

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

答案 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将为您提供产品的当前索引。