将ng-if添加到html中的图像
将ng-if添加到HTML中的图像是指使用AngularJS的指令ng-if来控制图像的显示与隐藏。ng-if是AngularJS中的一个内置指令，用于根据条件动态地添加或移除DOM元素。
ng-if的语法如下：
<img ng-if="condition" src="image.jpg">其中，condition是一个表达式，当表达式的值为true时，图像会被显示出来；当表达式的值为false时，图像会被从DOM中移除。
ng-if的优势：
- 提高性能：ng-if会根据条件动态地添加或移除DOM元素，可以减少不必要的DOM操作，提高页面加载和渲染的性能。
- 简化逻辑：通过ng-if可以根据条件来控制图像的显示与隐藏，简化了手动操作DOM的逻辑。
ng-if的应用场景：
- 根据用户的登录状态显示不同的头像图像。
- 根据数据加载状态显示加载中的图像或显示加载完成的图像。
- 根据用户权限显示不同的图像。
腾讯云相关产品推荐：
腾讯云提供了丰富的云计算产品和服务，以下是一些与ng-if相关的产品推荐：
- 腾讯云服务器（CVM）：提供弹性计算能力，可根据业务需求动态调整服务器的规模和配置。产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供高可靠、低成本的对象存储服务，可用于存储和管理图像等多媒体文件。产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云CDN：提供全球加速服务，可加速图像等静态资源的传输，提高用户访问速度。产品介绍链接：https://cloud.tencent.com/product/cdn
相关·内容
因此，无论出于什么原因，我都试图创建一个滑块，其中每个幻灯片的内容都是不同的HTML模板。所以你可以说它不是一个图像滑块，而是一个HTML滑块。
所以在我的HTML中，我只有这段代码，滑块的控件也在这个HTML模板中：
<slide-template></slide-template>
这是我的整个幻灯片模块：
(function() {
'use strict';
angular
.module('slideCtrl', [])
.directive('slideTemplate
浏览 6提问于2015-07-08得票数 0
回答已采纳
我有一个ng-重复显示多个项目。当我单击视图图像按钮时，它将在该项目中显示图像。
代码运行良好，但它将在所有项目列表中添加图片的html内容，其中包含一个ng-hide类。
如何仅在项目列表中在单个li中显示图像的ng重复？
projects.html
<ul>
<li ng-repeat="item in projects">
<p>{{ item.name }}</p>
<p><button ng-click="displayImages(item.id)
浏览 3提问于2015-08-02得票数 2
回答已采纳
我想编辑超文本标记语言和CSS代码，使其在页面上以不同的方式排列，这取决于是否满足条件或不使用AngularJS (ng命令)。 我有thisYear=true或false 如果thisYear为真，我希望标签和页面输入的超文本标记语言标签以某种方式排列，使用inLine css，如果年份为假，我想以不同的方式排列它。 如何在AngularJS (ngIf)中设置if/else语句并编辑html和CSS inLine？
浏览 18提问于2019-05-13得票数 0
回答已采纳
2回答
css隐藏无图像图标
、、、
img.profile-picture{
width:80px;
min-height: 80px;
float: left;
background-image: url("/images/user-4.png");
}
上面的CSS设置了一个配置文件图片的背景，当用户还没有上传他们自己的个人资料图片时，设置一个很好的位置保持器。
其中的图像标记看起来像：
<img class="pull-left profile-picture" ng-src="{{profilePictu
浏览 7提问于2016-03-08得票数 0
回答已采纳
有简单的指令
.directive('test', function () {
return {
templateUrl: 'dir.html',
scope: {
date: '='
},
link: function (scope, element, attrs) {
element.find('.date
浏览 4提问于2016-01-29得票数 0
回答已采纳
6回答
我是一个新手，正在尝试修复一些AngularJS代码在计算ng-if条件之前显示的问题。我正在使用ng-cloak，正如在许多其他堆栈中提到的那样，它仍然不适用于我。我正在尝试加载默认图像，如果URL上的实际图像是空白的，当页面加载时，即使实际的URL在那里，它也会首先闪烁默认图像，然后加载实际图像，因为ng-cloak不能正常工作。
请帮帮忙。
我有以下代码和CSS等。
Index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href
浏览 2提问于2015-11-20得票数 7
我的目标：我想防止旋转木马下载图片，直到点击菜花按钮
带有ng的版本-如果图像没有加载在旋转木马中。
<button ng-click=" visSlide=false" > thumbnails </button >
<button ng-click=" visSlide=true" > carousel</button >
<div ng-if="!visSlide" ng-include src="'_thumbnails.html'"
浏览 2提问于2015-02-21得票数 0
我正在用的api做一个Ionic项目。我有一个ng重复的数组，显示一些图像(强制图片)。但并不是数组中的所有图像都有实际的图像。
现在，当api不提供图像时，我试图显示默认图像。我的问题是如何使用ng-如果我想的话。在我的控制器中，我创建了一个范围如下：
$scope.default_image = '../img/default_poster.png';
我的控制器的一部分：
.controller('MovieDetailCtrl', function($scope, $stateParams, $ionicLoading, MovieSer
浏览 1提问于2015-11-09得票数 0
回答已采纳
我使用ng-重复显示列表中的所有JSON数据。然而，我每一个数据，一些数据由文本数据和一些图像数据组成。如果它包含图像数据，它将显示图像，如果它包含文本数据，则应用程序将显示文本数据。我使用ng-if条件来显示文本数据或图像数据。下面是我的代码。
html
<li ng-repeat="message in messages" ng-class="getClass(message.username)">
<div class="avatar"><img ng
浏览 5提问于2017-06-15得票数 0
回答已采纳
1回答
我有一个如下结构的应用程序 Index.html 其中包含所有路由的app.js，并且在index.html内部添加了ng-view 我有另一个模板，这是加载在这个ng视图连续登录是home.html 我可以在home.html中也有一个ng-view吗？并且当我点击主页中的任何菜单链接时加载到该ng-view？ 我在下面添加我的路由详细信息 .config(['$routeProvider'，function ($routeProvider) { $routeProvider
.when('/login', {
controller:
浏览 35提问于2019-01-29得票数 0
回答已采纳
1回答
我正在尝试在base64中显示HTML图像。下面是我的HTML代码。
<img ng-if="fileExtension == 'tif'" ng-src="data:image/tiff;base64,{{attachment}}" id="photo-id" style="width: 100%;padding: 15px 0px 15px 0px" />
<iframe ng-if="fileExtension == 'tif'" src="dat
浏览 22提问于2018-08-16得票数 1
回答已采纳
我有一个要求，我只需要显示选定的李的孩子。例如。在下面显示的图像中，EIS_ASCP_FORECAST_SETS_V被选中，因此它的子FND_USER和MRP_FORECAST_DESIGNATORS_V被显示，其余的元素被隐藏。类似地，当选择FND_USER时，必须显示它的子元素。树是使用jquery创建的，并且是动态的。我在页面的其余部分使用AngularJS。
我试过使用$(event.target).parent().find('li')，但是无法从它中提取子元素。
树的形成代码
<li class="treeView">
<
浏览 1提问于2015-11-02得票数 0
回答已采纳
在我的app.js文件中，我有数据驱动的类，比如文本和图片类。我有一个超链接类，我对它使用了Href，如下所示：
div class = "links" ng-if="field.fieldLink">
<a ng-if="content.LinkField.fieldLinkNewTab !== false" target="_blank"
ng-href="{{ content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLi
浏览 3提问于2017-09-29得票数 0
问题 如何使用Angular在HTML表格中有条件地插入一行？ 关于这个问题的更多细节 我正在使用Node-RED中的Angular，下面是我的表，它遍历了对象中的每个键/值： <table>
<tr>
<td>ID</td>
<td>State</td>
<td>Data</td>
</tr>
<tr ng-repeat="(key, value) in msg.shellies">
浏览 25提问于2020-12-22得票数 0
我已经在CSS中创建了一个样式按钮，它将圆角应用于第一个和最后一个元素。
看起来是这样的：
现在的问题是，根据具体情况，我需要使用角ng-if插入新的按钮。当我这样做的时候，新的按钮会把第一个也是最后一个孩子的圆角弄乱。例如，下面是在满足某些条件时添加新按钮的相同图像：
请注意，在上面的图像中，添加带有ng-if的X和pin图标会导致舍入问题。
如何更改代码，以便如果添加或删除了动态按钮，那么第一个和最后一个圆角子元素就不会被弄乱？，我不希望基于ng-if创建两个不同的列表。我宁愿保留元素ng-ifd的列表。
参考HTML代码：
<div id="flyout
浏览 3提问于2016-12-10得票数 0
回答已采纳
我已经开发了一个网站，像youtube一样加载视频。我面临的主要问题是能够加载视频的前置图像，而不是在浏览器中加载整个视频。只有当用户点击播放视频时，它才会加载到浏览器中。我想要做到这一点的主要原因是因为太多的视频加载到页面上会导致页面变慢。
视频的HTML5代码如下：
<video id="videolink" type="video/mp4" ng-src="{{v.video_path}}" controls ></video>
浏览 1提问于2015-04-17得票数 0
我正在处理一个AngularJS(1.4)项目，在这个项目中，我希望在特定条件下加载一个指令。
此指令在加载时调用少量API并显示一些HTML元素。
我只想在满足这些条件的情况下才调用这些API。
如果不满足条件，我尝试如下：
使用ng-if，它不是显示指令，而是调用API。使用ng-show的，不是显示指令，而是调用API。
我知道ng-if首先添加了指令，然后在不满足条件的情况下删除它。在这里，在加载指令时，将调用API。
有没有办法或方法来解决这个问题？
浏览 2提问于2019-12-25得票数 0
2回答
我必须限制Angularjs数组对象。如果它是数组，我使用的是limitTo过滤器，它是工作的。
但在这种情况下，我必须限制对象数组。
我需要首先只限于对象
这里是我的html代码：
<md-select required name="filterType"
ng-model="filter.type" aria-label="{{ 'alias.filter-type' | translate }}">
<md-option ng-value="type.value
浏览 0提问于2018-04-13得票数 0
回答已采纳
我有动态的图像和视频，但我想一次显示图像或视频。我希望当我点击图像id时，它将显示图像，当我单击视频Id时，它将显示视频。
html代码：
<div class="container" ng-init="image()">
<div class="row">
<div class="col-md-12" ng-repeat="img in images">
<di
浏览 0提问于2019-02-04得票数 0
您好，我正在构建一个应用程序，我想要动态更改图像的源，以便强制重新加载它。问题是，按照这个顺序，我在浏览器上只能得到一个损坏的图像。相反，如果一个人通过一个按钮手动运行这个函数，它就会运行得很好。
HTML文档
<!DOCTYPE html>
<html lang="en" ng-app='cameraApp'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
浏览 0提问于2015-08-16得票数 2
我从youtube的网页上下载了很多视频。我想用占位符替换div，只有当用户单击占位符图像时才请求视频。
我让这部分工作，它加载视频的ng-点击，但它加载所有的，显然。怎么才能加载被点击的那个呢？
这里是我的html在ng-视图和ng-重复：
<figure class=" img-responsive">
<iframe width="320" height="180" ng-src="{{item.VideoUrl | trusted }}"
frameborder
浏览 2提问于2015-09-25得票数 2
回答已采纳
我正试着用动态ng-include做一些AngularJs的例子，但是不起作用。
下面是我的例子。
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Directives</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
浏览 1提问于2017-09-09得票数 0
1回答
我试图在我的图像周围放置一个容器来控制图像的高度。
由于某种原因，我的容器css高度无法工作。自从我需要使用css已经有一段时间了，所以我有点生疏了。
我正在用angularjs创建一个离子应用程序。这就是为什么在你们中的一些人看来，代码看起来有点奇怪，但是过多的代码不应该对css产生影响。
我可能会找人帮忙回答我的问题：
下面是我的代码HTML：
<ion-view view-title="Gallery" align-title="center">
<ion-content class="center" ng-contro
浏览 3提问于2015-07-11得票数 0
回答已采纳
我正在尝试根据我的服务的功能来设置元素的可见性。有没有一种方法可以做到这一点，而不会再次在控制器中重复该函数？
服务：
angular
.module('app')
.service('userService', userService);
userService.$inject = ['$window', '$rootScope', '$uibModalStack', '$state'];
function userService($window, $rootScope, $uibModalS
浏览 5提问于2018-08-30得票数 1
回答已采纳
我尝试使用ng-if表达式将帖子呈现为图像或文本，具体取决于内容。这些行中的第一行有时呈现为true，有时呈现为false，但在每次迭代中都会显示图像和跨度。
<a href="{{post.url}}">
{{post.type == 0}}
<img ng-if="post.type == 0" src="{{post.content}}" />
<span ng-if="post.type == 1">{{post.content}}<span>
</a&g
浏览 0提问于2013-08-21得票数 0
所以我试图在登录页面上隐藏一个导航栏。我将导航栏放在一个nav-element中，并在元素中放入一个"ng- if“，以便仅当用户在应用程序(而不是登录页面)中时才呈现。
<!DOCTYPE html>
<html lang="en" ng-app="demoapp">
<head>
<!-- Angular & jQuery -->
<script src="js/jquery-3.2.0.min.js"></script><!-- l
浏览 33提问于2017-08-25得票数 2
回答已采纳
在我的角度应用程序中，我从数据库中获取图像名，然后在用户登录时将其存储在本地存储中。
现在，登录后，将加载要重定向的页面，而无需刷新应用程序。
在这一页上，我想显示我存储在本地存储器中的图像。
if (localStorage.getItem('logo') != undefined)
$rootScope.logo = "http://somewebsite.com/"+localStorage.getItem('logo');
现在，在HTML中
<img src="{{logo}}" >
所以问
浏览 1提问于2017-08-16得票数 0
在之后，我使用以下方法来尝试使用Karma而不是Protractor来测试ng-if标记的div是否正确显示：
var element;
beforeEach(inject(function ($rootScope, $templateCache, $compile) {
scope = $rootScope.new();
fooController.init(scope); //Some controller function that sets properties on the scope
//which are tes
浏览 0提问于2014-11-25得票数 1
2回答
无法从Json文件加载数据
、、、、
我想要做的是创建一个图像网格布局。与此类似，但在每个框中都有一张照片，它是通过HTTP.get从json文件加载的。
我试图通过创建第一行，然后使用ng-repeat来创建网格布局，从而创建新的行。
我从$http.get请求中检索图像，该请求通过JSON文件加载图像。
我不能让图像显示，我不知道为什么。控制台日志中没有错误。
到目前为止这是我的HTML代码。
<div class="row" ng-repeat="" ng-if="$index % 1 === 0">
<div class="col co
浏览 0提问于2015-08-11得票数 0
回答已采纳
我试图根据ng-init值隐藏、显示或更改局部html文件的样式。
我的部分是：
<article class="preview {{size}}" ng-if="desktop">
<a class="cover absolute" style="background-image:url(/images/samples/sample-image.jpg);">
<div class="post-info absolute full-width padding"
浏览 3提问于2016-04-06得票数 0
我有一个图像点击图像它显示一个覆盖包含一个文本区和一个按钮，以添加一个评论我正在使用ng-如果控制该文本区和按钮的图像，我正在显示添加图像，如果还没有添加评论，如果已经添加了评论和图像编辑一切都很好，但当我在该文本中输入文本时，它立即通过在ng-if的html中的角度绑定来更改图像以编辑图像。我不希望我的图像更改为编辑，因为用户可以点击十字架，而不是添加评论。
html：
ng-if="contract.tme_comments == '' || contract.tme_comments == null"
ng-click="commentType($
浏览 2提问于2014-07-14得票数 0
2回答
如果图像有‘已加载’类，我需要将图像源更改为"{{item.preview2}}“
<div ng-repeat="item in items">
<img src="{{item.preview}}" class="grid-img" />
</div>
浏览 0提问于2016-02-10得票数 0
我正在优化角应用程序的性能。我使用ng-include来添加部分视图及其控制器。下面是代码片段
<!--show term rule view-->
<div id="showTermRule" ng-controller="TermRuleController as term" ng-if="showTermRule">
<div data-ng-include src="'/Relevancy/termRule/termRule.html'" ng-if="!isPub
浏览 1提问于2017-05-03得票数 1
回答已采纳
2回答
谁能告诉我如何在AngularJS中将常量值传递给html？例如:在html文件中，我有一个ng-if条件。
<span ng-if="prod.ID">10</span>
在这里，我希望将值"10“设置为可配置。类似于：
<span ng-if="prod.ID == constants.prodID">10</span>
有什么建议吗？
提前谢谢你。
浏览 1提问于2015-03-26得票数 0
2回答
我在一个AngularJS应用程序上工作，我想有一个图像，如果点击，重定向到网址。
我已经能够做到这一点，但使用文本。下面是我的代码：
JS：
myLink:
{
LinkText: "Click here for the pdf:",
LinkHRef: "/documents/pdfs/Final.pdf"
}
HTML：
<div class="basic-page__link" ng-if="section.myLink">
<a ng-if="section.myLink.sectionLin
浏览 0提问于2017-09-23得票数 0
我不明白为什么ng-if会导致default.html在加载了ng-include的html代码片段页面上触发？
部分/某些Page.html
<div ng-repeat="note in notes">
<div ng-include="note.htmlSnippet"></div>
</div>
许多html代码片段页面中的一个，但这个页面包含一个ng-if。
htmlSnippet.html
<div>
<img ng-if="note.pk>0"
浏览 0提问于2018-03-13得票数 1
当类型数组没有值时，尝试隐藏<li>|</li>。我是使用ngIf/ngHide来完成这个任务，还是必须将其编码到控制器中？
以下是我的HTML：
<div>
<ul class="list-inline">
<li ng-if="genre.name" ng-repeat="genre in genres"><a ng-href="/#/genre/{{genre.id}}">{{genre.name}}{{$last ? '
浏览 2提问于2016-02-29得票数 0
回答已采纳
我在[AngularJS]中使用jQuery DataTables。在这个[Example]中，他加载的是硬编码数据，所以加载速度很快。但是，在我的例子中，我编写了服务，所以数据将在一段时间后加载。这意味着在加载HTML时。因此，最初它没有显示任何可用的数据，一段时间后，它显示了全部1000条记录，而没有应用分页。为了避免HTML加载比服务更快，我有没有做错什么？
浏览 0提问于2018-09-18得票数 0
1回答
我正试着用1.4.8角填充一张桌子。
为什么这个不行..。
<td ng-if="fila" ng-repeat="celda in fila">{{ celda }}</td>
...but这样做
<td ng-if="fila">{{ fila[0] }}</td>
<td ng-if="fila">{{ fila[1] }}</td>
<td ng-if="fila">{{ fila[2] }}</td>
<
浏览 2提问于2016-03-01得票数 1
回答已采纳
很抱歉，我不能提供关于这个问题的任何代码片段，我是AngularJS的新手。
<div ng-repeat="item in list" ng-view></div>
使用上面的代码，是否可能呈现依赖于item.type属性的不同模板。我以为会有这样的结果：
item.type ==“图像”返回：<div><img src="'IMAGE_URI'"></div>
item.type == "text“返回：<div><p>TEXT</p&g
浏览 3提问于2014-05-21得票数 3
回答已采纳
我有一个指令，根据注入指令的对象，我尝试动态加载不同的部分
function countSummary() {
var directive = {
scope: {
countData: '='
},
link: link,
template: '<div ng-include=\'countData.countType === "expected" ? ' + '"/app
浏览 1提问于2015-08-14得票数 0
回答已采纳
我有一个带有图像的div：
<div ng-if="showIt">
<img src="{{filepath}}/{{filename}}">
<!-- ... and a bunch other other elements -->
</div>
问题是，如果{{filepath}}是假的，那么{{filename}}将为null。
但是，我总是在控制台中看到404错误，因为我认为Angularjs正在呈现整个DOM，然后删除ng-if计算为false的部分。这意味着即使showIt是假的，浏览
浏览 1提问于2015-04-20得票数 1
回答已采纳
2回答
我使用帮助ng重复在页面上呈现表单，该表单的数据动态地来自请求。在这个数据中，我有嵌套数组类别。在这个数组中，我可以在表单中看到定义的in和这个in的列表。从另一个请求中，我得到了另一个数组，其中定义了ids的名称。如何将一个变量的键值分配给显示在页名列表上的另一个变量的键值，而不是I列表。
这是和我的问题。我很感谢你的帮助，谢谢。
我的表单的html
<form style="padding: 15px" ng-submit="submitForm(rowData)">
<div class="form-gr
浏览 3提问于2016-08-18得票数 1
回答已采纳
我遵循从的文章，我想从ng-if迁移到ng-messages。但是，当我试图向用户显示<input type="email">的两条不同消息时，<input type="email">指令的行为非常奇怪:第一，当用户离开字段为空(然后发生required错误)和第二，格式错误时(然后出现email错误)--它同时显示required和mail消息，但我的旧代码只显示了一条消息--关于required错误--我认为这是受欢迎的行为。以下是简化的代码：
<form name="ngMessageMailForm">
浏览 5提问于2015-12-13得票数 1
回答已采纳
我希望将角事件和模型绑定到由javascript代码附加的html元素。
我的密码在这里。
<div ng-app>
<div ng-controller="MyController">
<input type="text" ng-model="text1">
<a href="#" ng-click="onClick()">click1</a>
<div id="append"
浏览 3提问于2015-05-23得票数 1
回答已采纳
我有简单的角度js应用程序。在这里，我从谷歌驱动器中获取图像，并在页面中显示。
在这里，我试图显示一个加载程序，直到图像完全加载到我的页面。有时候，当我有较低的带宽，它需要时间来加载图像从谷歌驱动器。所以i want to implement a loader on my screen until all images are fully loaded。
我如何知道什么时候图像是完全加载，然后我可以隐藏我的装载机。我不想使用setTimeout()。
index.html
<!DOCTYPE html>
<html>
<hea
浏览 1提问于2018-08-03得票数 1
在Angular中有没有解决以下问题的方法：
<span>Delete {{ vm.name ? '<strong>' + vm.name + '</strong> : 'this user'}}?</span>
如果vm.name标签存在，我想将名称包装在<strong>标签中，如果不存在，我想显示没有<strong>标签的this user？
这个是可能的吗？
任何帮助都是非常感谢的。提前感谢！
浏览 0提问于2016-02-25得票数 0
我有一个固定的标题和一个行元素(col-xs-2)来填充它。我尝试为一个col-xs-2元素填充颜色，并将文本置于中心位置。但它只填充col-xs-2 div。有人能帮我吗?我该怎么做？
ABOUT、B1、LEVEL1等都是一个列-xs-2元素。
我需要ABOUT div完全填充，而不是只填充一半，并将文本置于中心。
我的代码：
<div class="navbar navbar-default navbar-fixed-top text-center">
<div class="container-fluid
浏览 0提问于2017-03-14得票数 0
在我的页面上，我有一个用于图像的离子幻灯片盒。因为在我的应用程序中，用户可以嵌入视频，所以我也应该将带有视频的iframes添加到同一个滑块中。这就是我的代码现在的样子：
这是我的html：
<ion-slide-box ng-if="slider.length > 1">
<ion-slide ng-repeat="item in slider">
<img ng-if="item.image" ng-src="{{ fileServer }}/imagecache/cover/{{ it
浏览 1提问于2016-07-06得票数 6
我有一个隐藏的select输入，它由ng-if隐藏。在隐藏的select中，我添加了一个ng-change标记，它反过来调用一个函数来显示img，这个img也是由ng-if隐藏的。
hiddenNinja最初是隐藏的。
在外部函数上，hiddenNinja显示它的元素(例如，select输入)。
更改select值时，不显示hiddenTommy。
但是，如果最初显示hiddenNinja，那么只会显示hiddenTommy。
下面示例的代码。
HTML：
<div ng-controller="NinjaController"> // Cont
浏览 2提问于2014-10-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
