我正在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"> <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"> <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] 删除。
我来说两句