Javascript AngularJS ng根据JSON中的特定ID重复筛选
我似乎做不到这一点。 我一直在尝试按特定ID过滤JSON文件,然后使用ng repeat进行迭代 这是我试过的 这是按钮触发器:Javascript AngularJS ng根据JSON中的特定ID重复筛选,javascript,angularjs,json,Javascript,Angularjs,Json,我似乎做不到这一点。 我一直在尝试按特定ID过滤JSON文件,然后使用ng repeat进行迭代 这是我试过的 这是按钮触发器: <a href="#/compare-details"><button class="viewDetails" ng-click="passID(11,02,00)" type="button">test button</button></a> var newData; angular.module('handsetE
<a href="#/compare-details"><button class="viewDetails" ng-click="passID(11,02,00)" type="button">test button</button></a>
var newData;
angular.module('handsetExplorerModule')
.controller("compareDetailsController", ['$scope','compareDetailsService', function($scope, compareDetailsService) {
compareDetailsService.getHandsetList()
.then(
function(data){
$scope.passID = function(id1,id2,id3){
for(int i=0; i<data.phones.length; i++){
if(data.phones[i].id == id1 || data.phones[i].id == id2 || data.phones[i].id == id3){
newData += data.phones[i];
}
}
}
},
function(error){
//todo: handle error
}
);
$scope.phoneContent = newData;
}]);
angular.module('handsetExplorerModule')
.factory('compareDetailsService', ['$http','$q', function($http, $q) {
var service = {
};
service.getHandsetList = function(){
var deferred = $q.defer();
$http.get("./data/compareJSON.json").then(function(response) {
deferred.resolve(response.data);
},
function(response){
deferred.reject("ERROR: Unable to get handsetList data");
}
);
return deferred.promise;
};
return service;
}]);
和我的ng重复
<div id="divContent">
<div>
<table id="Content" ng-repeat="x in phoneContent">
<tr>
<td class="one">
<table>
<tr>
<td><img class="contImage" ng-src="{{x.image}}" ng-alt="{{x.name}}" /></td>
<td class="textAlign">{{x.name}} <button class="viewDetails" ng-click="viewDetails(x.id)" type="button">VIEW DETAILS</button></td>
</table>
</td>
<td class="two">{{x.size}}</td>
<td class="one">{{x.storage}}</td>
<td class="two">{{x.camera}}</td>
<td class="one">{{x.battery}}</td>
<td class="two">{{x.network}}</td>
<td class="one">{{x.sim}}</td>
</tr>
</table>
</div>
</div>
{{x.name}}查看详细信息
{{x.size}}
{{x.storage}}
{{x.camera}}
{{x.battery}}
{{x.network}}
{{x.sim}}
请检查重构一点:
顺便说一句,$http服务本身就是一个承诺,所以不需要使用$q服务,只需返回$http:
有一个非常类似的教程,您应该看看:请检查重构一点: 顺便说一句,$http服务本身就是一个承诺,所以不需要使用$q服务,只需返回$http:
有一个非常类似的教程,您应该看看:不要认为您了解ajax请求的异步性质,例如使用
$http
。仔细研究。它是这个站点上javascript标签中链接最多的答案之一。您的控制器需要完全重新构造—删除所有数据并将其存储……然后,当单击按钮时,通过单独的操作对其进行过滤。或者等待按钮点击获取数据。然后过滤响应…你有一个混合了这两种方法的hodge podge,应该会抛出错误。Kay,谢谢你的链接。不要认为你理解ajax请求的异步性质,比如使用$http
。仔细研究。它是这个站点上javascript标签中链接最多的答案之一。您的控制器需要完全重新构造—删除所有数据并将其存储……然后,当单击按钮时,通过单独的操作对其进行过滤。或者等待按钮点击获取数据。然后过滤响应…你有一个混合了这两种方法的hodge podge,应该抛出错误Sokay,谢谢你的链接。嗯,另一个问题,如果我希望按钮触发器出现在另一个网页上,我该怎么办?你可以创建一个服务或工厂,这是一个单例,因此在所有页面中共享。在该服务中,您可以存储要用于筛选表的ID列表。现在,在另一个页面上,您设置了所需的ID并将用户重定向到带有表的页面,这将使用存储的ID列表(如果设置了此列表)过滤数据。嗯,另一个问题,如果我希望按钮触发器位于另一个网页上,我该怎么办?您可以创建一个服务或工厂,它是一个单例,因此在所有页面之间共享。在该服务中,您可以存储要用于筛选表的ID列表。现在,在另一个页面上,您设置了所需的ID并将用户重定向到带有表的页面,这将使用存储的ID列表(如果设置了此列表)过滤数据
myApp.factory('compareDetailsService', ['$http', function($http) {
return {
getHandsetList: function(){
return $http.get("data.json");
}
};
}]);