如何使用angularjs中的项目符号显示json数据列表？

Question

如果答案是obj，我想显示它应该显示为段落，如果是数组，它应该使用项目符号或编号显示列表。例如，  我喜欢数学  2.这并不困难

我的控制器是，

    $scope.books = {
        "types": [
            {
                "category": "subjects",
                "sub": [
                    {
                        "question": "what is maths",
                        "answer": {
                           "obj": "it is a subject",
                           "array": [
                                "i like maths",
                                "it is not difficult"
                            ],
                        }
                    },
                    {
                        "question": "what is science  ?",
                        "answer": {
                           "obj": "it is a subject",
                           "array": [
                                "i like maths",
                                "it is not difficult"
                            ],
                        }
                    }
                ]
            }
        ]
    }

我的htlm代码是，

     <div ng-repeat="book in books.types">
     <div ng-repeat="ans in sub.answer"> 
        {{ans}}
      </div>
     </div>

Answer 1

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

app.controller('testCtrl',function($scope){
   $scope.books = {
        "types": [
            {
                "category": "subjects",
                "sub": [
                    {
                        "question": "what is maths",
                        "answer": {
                           "obj": "it is a subject",
                           "array": [
                                "i like maths",
                                "it is not difficult"
                            ],
                        }
                    },
                    {
                        "question": "what is science  ?",
                        "answer": {
                           "obj": "it is a subject",
                           "array": [
                                "i like maths",
                                "it is not difficult"
                            ],
                        }
                    }
                ]
            }
        ]
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <div ng-repeat="book in books.types">
     <div ng-repeat="ans in book.sub"> 
            <p>  {{ans.answer.obj}} </p>
            <ul><li ng-repeat="testans in ans.answer.array">  {{testans}} </li><ul>
       </div>
</div>

Answer 2

试试这个可以按照您的期望运作：

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

myApp.controller('MyCtrl', function($scope) {
    $scope.books = {
        "types": [
            {
                "category": "subjects",
                "sub": [
                    {
                        "question": "what is maths ?",
                        "answer": {
                           "obj": "it is a subject",
                           "array": [
                                "i like maths",
                                "it is not difficult"
                            ],
                        }
                    },
                    {
                        "question": "what is science  ?",
                        "answer": {
                           "obj": "it is a subject",
                           "array": [
                                "i like maths",
                                "it is not difficult"
                            ],
                        }
                    }
                ]
            }
        ]
    };
});

.answer-heading {
  font-size: 20px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="book in books.types">
     <div ng-repeat="item in book.sub">
        <h2>Question : <span>{{item.question}}</span></h2>
        <p><span class="answer-heading">Answer : </span>{{item.answer.obj}}</p>
        <ul>
          <li ng-repeat="elem in item.answer.array">{{elem}}</li>
        </ul>
      </div>
  </div>
</div>