我是 Angular JS 的新手。通过 Angular JS 创建一些产品列表可搜索图库。
我的所有产品数据都在同一个 js 文件中，这不是一个好的解决方案。我想要所有数据动态驱动或者想要通过 json 或 XML 调用。
任何人都可以指导我吗，下面是示例代码:
HTML:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" href="../bootstrap.css">
<link rel="stylesheet" href="../app.css">
<script src="../angular.js"></script>
<script src="../controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p><img src={{phone.img}}></p>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS
'use strict';
/* Controllers */
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function($scope) {
$scope.phones = [
{'img': 'images/img.gif',
'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'},
{'img': 'images/img.gif',
'name': 'Nexus S',
'snippet': 'The Next, Next Generation tablet. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'},
{'img': 'images/img.gif',
'name': 'Nexus S',
'snippet': 'The Next, Next Generation tablet. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'}
];
});
提前非常感谢。
最佳答案
您可以使用 AngularJS 服务通过 REST 接口(interface)加载 JSON 文件，如下所示:
dataService.service("dataService", function($http)
{
var data= {};
$http.get('data/serverData.json').then(function(serverData) {
data = serverData;
});
this.getData= function(){
return data;
};
});
关于javascript - 如何在 Angular Js 中调用 100 多种数据产品 - 需要一些动态数据驱动的解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25351813/