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

时间:2014-06-24 06:39:25

标签: angularjs angularjs-controller angularjs-filter

我正在创造一个"当天的话语" 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>搞砸。

1 个答案:

答案 0 :(得分: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 );

     });

});