angularjs操作json

最新推荐文章于 2021-03-22 20:58:54 发布

cdb_680

最新推荐文章于 2021-03-22 20:58:54 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cdb_680/article/details/78513840

这个示例展示了如何在AngularJS中使用$http服务获取JSON数据，并通过过滤器(filter)根据用户输入过滤显示数据。博客内容包括定义控制器、获取服务器数据、使用ng-keydown事件触发过滤函数以及在表格中展示数据。

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

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js"></script>
<script>
var app = angular.module("gaoynApp", []);
app.controller("democ", ["$scope", "$http","$filter", function($scope, $http,$filter) {
//直接从服务器获取的数据
$scope.resdata; //保存最初始数据
$scope.datas; //视图上展示的数据

//定义过滤数组
$scope.selectbyname=function(){
console.log("----------------");
//添加过滤器 $filter(服务)--->内置9个过滤器小对象
var f=$filter("filter");//从服务中选取一个过滤"filter"---->筛选数组元素 html视图datas|fileter:
//$scope.resdata---->一开始从服务端
//$scope.datas=f($scope.resdata,$scope.gname);//$scope.gname--->从输入框查询条件

$scope.datas=f($scope.resdata,$scope.gname);
}

$scope.getData = function() {
console.log(">>>>>>>>>>>>");
//通过http请求服务端一个json数据串
//• $http.get(url)适用于读取数据的函数
//stars.json url
$http.get("stars.json").then(function(resp) {
//获取真正的数据源本质就是数组
$scope.datas = resp.data;
$scope.resdata=resp.data;
});
}

}]);
</script>
<style>
input {
display: block;
margin: 2px;
}
</style>
</head>

<body ng-app="gaoynApp" ng-controller="democ">
<input type="button" value="获取数据" ng-click="getData()" />

<input ng-keydown="selectbyname()" ng-model="gname" />

<table border="1px">
<tr>
<th>姓名</th>
<th>头像</th>
<th>年龄</th>
<th>性别</th>
<th>专辑</th>
</tr>
<tr ng-repeat="data in datas">
<td>{{data.name}}</td>
<td>
<img width="100px" src={{data.photo}} alt="图片无法加载显示" />
</td>
<td>{{data.age}}</td>
<td>{{data.sex}}</td>
<td>{{data.ablum}}</td>
</tr>
</table>
</body>

</html>