首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular js ng-repeat for嵌套json值

AngularJS是一个由Google开发的JavaScript框架,用于构建单页应用程序。它通过使用指令扩展了HTML,使开发者能够通过声明式语法来构建动态的Web应用程序。

ng-repeat是AngularJS中的一个指令,用于在HTML模板中循环遍历一个集合,并为每个元素生成相应的HTML代码。当遍历一个嵌套的JSON值时,可以使用ng-repeat嵌套来实现。

下面是一个示例,展示如何使用ng-repeat for嵌套JSON值:

代码语言:html
复制
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in data">
    <h3>{{ item.category }}</h3>
    <ul>
      <li ng-repeat="subItem in item.items">
        {{ subItem.name }} - {{ subItem.price }}
      </li>
    </ul>
  </div>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.data = [
      {
        category: 'Category 1',
        items: [
          { name: 'Item 1', price: 10 },
          { name: 'Item 2', price: 20 },
          { name: 'Item 3', price: 30 }
        ]
      },
      {
        category: 'Category 2',
        items: [
          { name: 'Item 4', price: 40 },
          { name: 'Item 5', price: 50 }
        ]
      }
    ];
  });
</script>

在上面的示例中,我们有一个嵌套的JSON值,其中包含两个类别的商品。使用ng-repeat指令,我们首先循环遍历每个类别,然后在每个类别中再次循环遍历每个商品。通过使用嵌套的ng-repeat,我们可以轻松地在HTML模板中展示嵌套的JSON值。

对于AngularJS的更多信息和学习资源,可以参考腾讯云的AngularJS产品介绍页面:AngularJS产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行

<!doctype html> <html> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body ng-app="myApp">

我的购物车
序号 商品

08
领券