使用 AngularJS 从 JSON 文件中过滤数据

Question

我正在 Web 应用程序中创建“每日词汇”功能，并且我有一个具有以下数据结构的 JSON 文件。我无法让自己将 730 多个条目转储到 ng-init 下的 HTML 中，以按 day 过滤。

{"words":[ { "day":"0", "aramaic":"mi<u>t</u>ra", "english":"rain" }, { "day":"1", "aramaic":"libba", "english":"heart" }] }

我在控制器中调用了 JSON 文件并尝试通过作用域将其引入。

$http.get('content/words.json').success(function(data) {
    var pairNum, prevPage, nextPage;    
    pairNum = 1;

        $scope.word = {
            all:data,
            day:parseInt(data.words[pairNum]["day"]),
            eng:data.words[pairNum]["english"],
            cha:data.words[pairNum]["aramaic"],
            limit:data.words.length
        }   

});

至于我的死亡，我无法通过$scope.word.all 将 JSON 数据带到 HTML 中进行过滤。如果我处理错了，我将非常感谢这里的帮助，或者以不同的方式来构建这个解决方案。

这是 HTML 的外观

<div class="row" ng-init="words = word.all">
<h2>CHALDEAN WORD OF THE DAY</h2>
<div class="small-2 columns"><a ng-click="word.day = word.day - 1"><span ng-show="word.day > 1" class="foundicon-left-arrow"> &nbsp;<span></a></div>
<div class="small-8 columns" ng-repeat="word in words | filter:word.day"><h4 class="wotd">{{word.english}} :: {{word.chaldean}} :: {{word.day}}<h4></div>
<div class="small-2 columns"><a ng-click="word.day = word.day + 1"><span ng-show="word.day < word.limit" class="foundicon-right-arrow"> &nbsp;<span></a></div></div><!-- .row -->

提前感谢所有尝试的人。

附言。我已经感觉我会被 JSON 中的 <u> 搞砸了。

Answer 1

请看这里：plnkr

html:

      <h2>CHALDEAN WORD OF THE DAY</h2>
    <div class="small-2 columns">
    <a ng-click="pairNum = pairNum -1">
    <span ng-show="pairNum > 0" class="foundicon-left-arrow"> previous <span></a></div>

    <div class="small-8 columns" ng-repeat="w in word | filter:{day:pairNum} ">
    <h4 class="wotd">
      {{w.english}} :
    : {{w.aramaic}} :
    : {{w.day}}
    <h4>

    </div>
    <div class="small-2 columns">
    <a ng-click="pairNum = pairNum + 1">
    <span ng-show="pairNum < word.limit-1" class="foundicon-right-arrow"> next <span></a>

</div></div><!-- .row -->

js:

    var app = angular.module('app', []);

    app.controller('MainCtrl', function($scope, $http) {

    $scope.pairNum = 0;
    $scope.words = [];

    $http.get('content/words.json').success(function(data) {

     angular.copy(data, $scope.words );

     });

});