问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ng-repeat 怎样循环出 json数据，并把循环出来的数据渲染到页面中？

头像
SmVoLi
    963911

    刚刚接触angularjs，求各位大神指教，感激不尽！

    angularjsjavascript后端前端
    阅读 6.2k
    3 个回答
    得票最新
    头像
    Sid
      1.7k228

      在 ng-repeat 中，使用 d in data，可以遍历数组中的每一个成员，如果成员本身就是一个直接的数据，则可以直接使用 d 来显示，如果成员还是一个对象，可以使用 d.id 的方法，来访问成员的各个成员。当然，如果直接显示 d 对象，将会以 JSON 的方式来显示。

      <script>
  $scope.data = [
    {id: 0, name: "Sid"},
    {id: 1, name: "SegmentFault"},
    {id: 2, name: "Github"},
    {id: 3, name: "Gitcafe"},
    {id: 4, name: "Coding.NET"},
  ];
</script>

<body>
  <p ng-repeat="d in data">id: {{d.id}}, name: {{d.name}}</p>
</body>
      头像
      Chobits
        7.4k2827
        头像
        _我已经从中二毕业了
          7.9k82131
          <div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
  </ul>
</div>

          手册例子↑

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题