使用AngularJS从JSON文件过滤数据

艾伦·吉莉安娜

我正在Web应用程序中创建“每日一词”功能,并且我有一个具有以下数据结构的JSON文件。我无法将730多个条目转储到HTML中以ng-init进行过滤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
        }   

});

不幸的是,我无法将JSON数据引入HTML进行$scope.word.all过滤。我将不胜感激,在这里提供帮助,或者如果我处理错误的方法,可以用另一种方法来构建此解决方案。

这是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 -->

预先感谢您所做的一切。

附言 我已经有一种将被<u>JSON搞砸的感觉

除夕夜

请在这里看看: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 );

     });

});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用AngularJs过滤JSON数据

来自分类Dev

如何使用AngularJS使用单选按钮过滤json数据?

来自分类Dev

使用AngularJS中的数据更新JSON文件

来自分类Dev

使用AngularJS过滤Firebase数据

来自分类Dev

如何使用jQuery过滤表(从JSON文件填充表数据)?

来自分类Dev

如何使用jQuery过滤表(从JSON文件填充表数据)?

来自分类Dev

AngularJS根据日期范围过滤JSON数据

来自分类Dev

AngularJS根据日期范围过滤JSON数据

来自分类Dev

AngularJS 过滤器对从 JSON 文件加载的数据不起作用

来自分类Dev

使用 javaScript 过滤 JSON 数据

来自分类Dev

使用 jquery 过滤 JSON 数据

来自分类Dev

无法使用json文件中的angularjs检测数据

来自分类Dev

AngularJS:如何使用angular从json文件中读取数据

来自分类Dev

使用Promise从Angularjs中的JSON文件读取数据

来自分类Dev

使用选定的值通过angularjs过滤数据

来自分类Dev

AngularJS-使用'true'属性过滤数据

来自分类Dev

如何使用angularjs过滤表上的数据

来自分类Dev

使用angularjs过滤json数组并根据数组项在2个表中显示数据

来自分类Dev

使用AngularJS过滤器过滤数据。如何遍历对象?

来自分类Dev

AngularJS-使用多级JSON过滤

来自分类Dev

使用AngularJS的复选框过滤Json

来自分类Dev

使用 awk 模式文件过滤数据

来自分类Dev

使用 PowerShell 从 CSV 文件中过滤数据

来自分类Dev

使用angularjs读取Json数据

来自分类Dev

使用angularjs读取Json数据

来自分类Dev

使用angularjs访问json数据

来自分类Dev

使用AngularJS加载JSON文件

来自分类Dev

如何使用Python过滤JSON数据?

来自分类Dev

使用angular by下拉列表过滤json数据

Related 相关文章

热门标签

归档