- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Giphy.com api 在 AngularJS 1.6 中开发一个应用程序。
有一个 Plunker HERE .
我遍历来自 https://api.giphy.com/v1/gifs/trending?api_key=myApyKey
的“giphys”数组,并将它们显示到 Bootstrap 4 卡片中。
有一个查看单个 giphy 功能。在我的 Controller 中:
// Create controller for the "giphyApp" module
app.controller("giphyCtrl", ["$scope", "$http", "$filter", "$timeout", function($scope, $http, $filter, $timeout) {
var url = "https://api.giphy.com/v1/gifs/trending?api_key=PTZrBlrq8h2KUsRMeBuExZ5nHyn7dzS0&limit=120&rating=G";
$scope.giphyList = [];
$scope.search = "";
$scope.filterList = function() {
var oldList = $scope.giphyList || [];
$scope.giphyList = $filter('filter')($scope.giphys, $scope.search);
if (oldList.length != 0) {
$scope.pageNum = 1;
$scope.startAt = 0;
};
$scope.itemsCount = $scope.giphyList.length;
$scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
};
$http.get(url)
.then(function(data) {
// giphy arary
$scope.giphys = data.data.data;
$scope.filterList();
console.log($scope.giphys);
// Paginate
$scope.pageNum = 1;
$scope.perPage = 24;
$scope.startAt = 0;
$scope.filterList();
$scope.currentPage = function(index) {
$("html, body").animate({
scrollTop: 0
}, 500);
$timeout( function(){
$scope.pageNum = index + 1;
$scope.startAt = index * $scope.perPage;
},0);
};
$scope.prevPage = function() {
if ($scope.pageNum > 1) {
$scope.pageNum = $scope.pageNum - 1;
$scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
}
};
$scope.nextPage = function() {
if ($scope.pageNum < $scope.pageMax) {
$scope.pageNum = $scope.pageNum + 1;
$scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
}
};
$scope.selectedIndex = null;
$scope.selectedGiphy = null;
$scope.fetchSinglegGiphy = function(giphy, index) {
console.log(index);
$scope.selectedIndex = index;
$scope.selectedGiphy = giphy;
}
});
}]);
网格
<div class="row grid" ng-if="giphyList.length > 0">
<div data-ng-repeat="giphy in giphyList | limitTo : perPage : startAt"
class="col-xs-12 col-sm-6 col-lg-4 col-xl-3 d-flex mb-4">
<div class="giphy d-flex flex-column w-100">
<div class="thumbnail pb-2 text-center" data-toggle="modal"
data-target="#giphyModal"
ng-click="fetchSinglegGiphy(giphy, $index)">
<img ng-src="{{giphy.images.downsized.url}}" class="img-fluid">
</div>
<div class="text mt-auto">
<p class="m-0 meta">{{giphy.import_datetime | dateParse | date : "MMMM dd y" }}</p>
<p class="rating m-0">
<i class="fa fa-star" aria-hidden="true"></i> {{giphy.rating | capitalize}}
</p>
<ul class="list-unstyled mb-0 text-center">
<li ng-if="giphy.username != ''" class="text-muted">{{giphy.type | capitalize}} file uploaded by
<br><strong>{{giphy.username | capitalize }}</strong>
</li>
<li ng-if="giphy.username == ''" class="text-muted">{{giphy.type | capitalize}} file uploaded by
<br> <strong>Unknown</strong>
</li>
<li class="h6">{{giphy.title | titlecase }}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal fade" id="giphyModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title h-3">{{selectedGiphy.title | titlecase }}</h4>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="image image text-center">
<img ng-src="{{selectedGiphy.images.original.url}}"
alt="{{selectedGiphy.title }}" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<div class="text-muted">Image ID: {{selectedGiphy.id}}</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-success" data-dismiss="modal">
<i class="fa fa-times-circle"></i> Close
</button>
</div>
</div>
</div>
</div>
</div>
应用程序的这一部分工作正常。
我曾期望能够轻松地向上面的模态添加下一个和上一个 giphy:
<div class="controls text-center">
<a href="#" ng-click="fetchSinglegGiphy(giphy, $index = $index - 1)" class="left">
<i class="fa fa-chevron-left"></i>
</a>
<a href="#" ng-click="fetchSinglegGiphy(giphy, $index = $index + 1)" class="right">
<i class="fa fa-chevron-right"></i>
</a>
</div>
令我惊讶的是,这不起作用。当我单击任何一个控件时,GIF 文件保持不变,但模式中的所有文本都消失了。
问题:
最佳答案
index.html
<div class="modal fade" id="giphyModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="controls text-center">
<a href="#" ng-click="fetchSinglegGiphyModal('prev')" class="left"><i class="fa fa-chevron-left"></i></a>
<a href="#" ng-click="fetchSinglegGiphyModal('next')" class="right"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="modal-header">
<h4 class="modal-title h-3">
{{ selectedGiphy.title | capitalize }}
</h4>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="image image text-center">
<img ng-src="{{ selectedGiphy.images.original.url }}" alt="{{ selectedGiphy.title }}" class="img-fluid" image-on-load ng-hide="modalImageLoading" />
<div class="spinner-border" ng-if="modalImageLoading"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<div class="text-muted">
Image ID: {{ selectedGiphy.id }}
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-success" data-dismiss="modal">
<i class="fa fa-times-circle"></i> Close
</button>
</div>
</div>
</div>
</div>
</div>
修改:
<a href="#" ng-click="fetchSinglegGiphyModal('prev')" class="left"><i class="fa fa-chevron-left"></i></a>
<a href="#" ng-click="fetchSinglegGiphyModal('next')" class="right"><i class="fa fa-chevron-right"></i></a>
fetchSinglegGiphyModal
根据作用于参数 prev
或 next
的条件处理上一个和下一个 Giphy我们在函数中传递的值。
我还添加了以下代码来引入bootstrap自带的loader来表示正在后台加载GIF图片。
<div class="image image text-center">
<img ng-src="{{ selectedGiphy.images.original.url }}" alt="{{ selectedGiphy.title }}" class="img-fluid" image-on-load ng-hide="modalImageLoading" />
<div class="spinner-border" ng-if="modalImageLoading"></div>
</div>
app.js
$scope.modalImageLoading = false;
$scope.fetchSinglegGiphy = function (giphy, index) {
$scope.selectedIndex = index;
$scope.selectedGiphy = giphy;
$scope.modalImageLoading = true;
};
$scope.fetchSinglegGiphyModal = function (dir) {
let selectedGiphy = null;
if (dir === "prev") $scope.selectedIndex -= 1; // To load previous
else if (dir === "next") $scope.selectedIndex += 1; // To load next
selectedGiphy = $scope.giphyList[$scope.selectedIndex];
if (selectedGiphy) {
$scope.selectedGiphy = selectedGiphy;
$scope.modalImageLoading = true;
}
};
$scope.fetchSinglegGiphyModal
作用于我们传入参数的条件,并显示相应的 Giphy 数据。
我已经实现了一个自定义指令来显示图像元素并在下载图像时隐藏加载程序。这是指令代码:
app.directive('imageOnLoad', function () {
return {
restrict: 'A',
controller: 'giphyCtrl',
link: function (scope, element, attrs) {
element.bind('load', function () {
scope.$apply(function () {
scope.modalImageLoading = false;
});
});
}
}
});
这是修改后的 plunker code .
希望对您有所帮助!
关于javascript - AngularJS 应用程序 : unable to update $index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57093700/
我正在通过 labrepl 工作,我看到了一些遵循此模式的代码: ;; Pattern (apply #(apply f %&) coll) ;; Concrete example user=> (a
我从未向应用商店提交过应用,但我会在不久的将来提交。 到目前为止,我对为 iPhone 而非 iPad 进行设计感到很自在。 我了解,通过将通用PAID 应用放到应用商店,客户只需支付一次就可以同时使
我有一个应用程序,它使用不同的 Facebook 应用程序(2 个不同的 AppID)在 Facebook 上发布并显示它是“通过 iPhone”/“通过 iPad”。 当 Facebook 应用程序
我有一个要求,我们必须通过将网站源文件保存在本地 iOS 应用程序中来在 iOS 应用程序 Webview 中运行网站。 Angular 需要服务器来运行应用程序,但由于我们将文件保存在本地,我们无法
所以我有一个单页客户端应用程序。 正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序 我们有自己的 OAuth2 服务器,因此人们可以登录应用程序并获取与用户实体关联的 access_t
假设我有一个安装在用户设备上的 Android 应用程序 A,我的应用程序有一个 AppWidget,我们可以让其他 Android 开发人员在其中以每次安装成本为基础发布他们的应用程序推广广告。因此
Secrets of the JavaScript Ninja中有一个例子它提供了以下代码来绕过 JavaScript 的 Math.min() 函数,该函数需要一个可变长度列表。 Example:
当我分别将数组和对象传递给 function.apply() 时,我得到 NaN 的 o/p,但是当我传递对象和数组时,我得到一个数字。为什么会发生这种情况? 由于数组也被视为对象,为什么我无法使用它
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章ASP转换格林威治时间函数DateDiff()应用由作者收集整理,如果你
我正在将列表传递给 map并且想要返回一个带有合并名称的 data.frame 对象。 例如: library(tidyverse) library(broom) mtcars %>% spl
我有一个非常基本的问题,但我不知道如何实现它:我有一个返回数据框,其中每个工具的返回值是按行排列的: tmp<-as.data.frame(t(data.frame(a=rnorm(250,0,1)
我正在使用我的 FB 应用创建群组并邀请用户加入我的应用群组,第一次一切正常。当我尝试创建另一个组时,出现以下错误: {"(OAuthException - #4009) (#4009) 在有更多用户
我们正在开发一款类似于“会说话的本”应用程序的 child 应用程序。它包含大量用于交互式动画的 JPEG 图像序列。 问题是动画在 iPad Air 上播放正常,但在 iPad 2 上播放缓慢或滞后
我关注 clojure 一段时间了,它的一些功能非常令人兴奋(持久数据结构、函数式方法、不可变状态)。然而,由于我仍在学习,我想了解如何在实际场景中应用,证明其好处,然后演化并应用于更复杂的问题。即,
我开发了一个仅使用挪威语的应用程序。该应用程序不使用本地化,因为它应该仅以一种语言(挪威语)显示。但是,我已在 Info.plist 文件中将“本地化 native 开发区域”设置为“no”。我还使用
读完 Anthony's response 后上a style-related parser question ,我试图说服自己编写单体解析器仍然可以相当紧凑。 所以而不是 reference ::
multicore 库中是否有类似 sapply 的东西?还是我必须 unlist(mclapply(..)) 才能实现这一点? 如果它不存在:推理是什么? 提前致谢,如果这是一个愚蠢的问题,我们深表
我喜欢在窗口中弹出结果,以便更容易查看和查找(例如,它们不会随着控制台继续滚动而丢失)。一种方法是使用 sink() 和 file.show()。例如: y <- rnorm(100); x <- r
我有一个如下所示的 spring mvc Controller @RequestMapping(value="/new", method=RequestMethod.POST) public Stri
我正在阅读 StructureMap关于依赖注入(inject),首先有两部分初始化映射,具体类类型的接口(interface),另一部分只是实例化(请求实例)。 第一部分需要配置和设置,这是在 Bo
我是一名优秀的程序员,十分优秀!