Question

我已经有一个前进和后退按钮，用于分析json文件中数组中的数据项：

控制器：

dishControllers.controller('DrinkcardsController', ['$scope','$http','$routeParams', function($scope, $http, $routeParams) {
$http.get('js/all.json').success(function(data) {
$scope.IsVisible = false;
        $scope.ShowHide = function () {
            $scope.IsVisible = $scope.IsVisible ? false : true;
        }

$scope.dish = data;
$scope.whichItem = $routeParams.itemId;

if ($routeParams.itemId > 0) {
  $scope.prevItem = Number($routeParams.itemId)-1;
} else {
  $scope.prevItem = $scope.dish.length-1;
}

if ($routeParams.itemId < $scope.dish.length-1) {
  $scope.nextItem = Number($routeParams.itemId)+1;
} else {
  $scope.nextItem = 0;
}
});
}]);

HTML：

<a ng-href="#/sidecards/{{prevItem}}"><div class="lbut">&laquo;</div></a>
<a ng-href="#/sidecards/{{nextItem}}"><div class="rbut">&raquo;</div></a>

两个样本json entires：

{
"name": "Pecan Pie",
"shortname": "pecan-pie",
"drink":"0",
"dessert":"1",
"contributor": "Mark",
"totalt": "1h 5m",
"ingredients": "1 cup light brown sugar",
"steps": "Preheat oven to 400 degrees.",
},
{
"name": "Godfather",
"shortname": "godfather",
"drink":"1",
"dessert":"0",
"contributor": "Jack",
"totalt": "5m",
"ingredients": "amaretto",
"steps": "mix and drink",
},

有没有办法让按钮仅浏览具有特定值的项目？换句话说，json文件中有几个条目，但我只希望前进和后退按钮在页面中翻阅值“drink”：“1”并排除值为“drink”的条目：“ 0" 。

请注意，为了清晰起见，缩短了json数据。真正的应用程序有8种菜肴，不仅仅是饮料和甜点。

更新： @MonVillalon 当我从这里更改控制器中的代码时：

$scope.dish = data;

到此：

$scope.dish = data.filter( function( item ){
return item.drink == 1 ;
});

它损坏了另一个控制器（如下所示）和HTML部分（这可以在Problem Page上看到点击墨西哥大米）。有什么想法吗？

dishControllers.controller('DrinksController', ['$scope', '$http', function($scope, $http) {
$http.get('js/all.json').success(function(data) {
$scope.dish = data;
$scope.dishOrder = 'name';

$scope.showDelete = function(itemDrink){
var testDrink = "1";

if(testDrink.indexOf(itemDrink) > -1){
   return true;
}
return false;
}

$scope.IsVisible = false;
        $scope.ShowHide = function () {
            $scope.IsVisible = !$scope.IsVisible;
        }
});
}]);

Answer 1

是的，您必须将结果过滤为只有您想要的内容，例如Array.filter。

更改代码

来自：

$scope.dish = data;

到此：

$scope.dish = data.filter( function( item ){
   return item.drink == 1 ;
});

AngularJS：使前进和后退按钮调用json数据，但前提是该项目具有特定值

1 个答案: