初入angularJS [5]

最新推荐文章于 2025-08-12 23:45:18 发布

weixin_30726161

最新推荐文章于 2025-08-12 23:45:18 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/yuluhuang/p/3501758.html

本文介绍如何在Angular应用中通过ng-repeat和ng-click指令实现数据展示及交互功能，具体展示了如何创建模块、控制器，以及如何利用HTTP服务获取JSON数据并将其展示为列表形式，同时演示了如何响应点击事件进行数据操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-click

 1 <!DOCTYPE html>
 2 <html ng-app="json">
 3 <head>
 4     <meta charset="utf-8">
 5     <script src="angular-1.0.1.min.js"></script>
 6     <title></title>
 7 </head>
 8 <body>
 9 <div ng-controller="ceshi">
10     <li ng-repeat="js in jsons">{{js.name}}-{{js.city}}</li>
11     <button ng-click="jsonclick()">测试</button>
12 </div>
13 </body>
14 </html>
15 
16         <script>
17             var json=angular.module('json',[]);
18            json.controller('ceshi',function($scope,$http){
19 
20                $scope.jsonclick=function(){
21                    $scope.jsons=[
22                        {name: 'John Smith', city: 'Phoenix'},
23                        {name: 'John Doe', city: 'New York'},
24                        {name: 'Jane Doe', city: 'San Francisco'}
25                    ];
26                };
27            });
28 
29         </script>