AngularJS是一个由Google开发的JavaScript框架,用于构建单页应用程序。它通过使用指令扩展了HTML,使开发者能够通过声明式语法来构建动态的Web应用程序。
ng-repeat是AngularJS中的一个指令,用于在HTML模板中循环遍历一个集合,并为每个元素生成相应的HTML代码。当遍历一个嵌套的JSON值时,可以使用ng-repeat嵌套来实现。
下面是一个示例,展示如何使用ng-repeat for嵌套JSON值:
<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-model 指令
ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值
ng-model指令
ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
实例:
AngularJS Select(选项框)
AngularJS 可是使用数组或对象创建一个下拉列表选项。
使用ng-options创建选项框
在AngularJS 中我们可以使用ng-option指令来创建一个下拉列表,列表通过对象和数组循环输出
实例:
序号 | 商品 | 单 08 扫码添加站长 进交流群 领取专属 10元无门槛券 手把手带您无忧上云 ![]() 相关资讯活动推荐 |
---|