如何在角度 JS 中添加图像
How to add images in angular JS
我是角度js的新手。
我偶然遇到了一个问题。我正在为我的数据使用 json,但不确定我应该如何在代码中添加图像
<div ng-controller="myCtrl" class="container">
<div class="col-md-8">
<div ng-repeat="item in products" class="product col-md-4">
<h3>{{item.title}}</h3>
<img ng-src="{{item.Image}}" alt="..." class="img-thumbnail">
<p>
<br>
<button type="button" ng-click="show = !show" class="btn btn-success">View Product</button>
<button type="button" ng-click="add_to_cart()" class="btn btn-danger">Add To Cart</button>
<br>
<span><b style="color: #ff0000">Size: </b> {{item.Size}} </span>
<span><b style="color: #ff0000">for: </b> {{item.Gender}} </span>
<br>
</p>
<div class="description" ng-show="show">{{item.description}}</div>
</div>
</div>
<div class="col-md-4">
<div id="cart" class="col-md-12">
<div id="cart_content" class="">
<h4>Cart:</h4>
<table id="test" class="table table-striped table-bordered">
<tr class="tr">
<th>Number</th>
<th>Title</th>
<th>Qty</th>
<th>Cost</th>
<th>Total</th>
<th></th>
</tr>
<tr class="tr" ng-repeat="pro in product">
<input type="hidden" name="someData" ng-value="{{pro.id}}" /> {{pro.id}}
<!-- <span style="display: none;">{{pro.id}}</span> -->
<td>{{pro.count}}</td>
<td>{{pro.title}}</td>
<td>{{pro.qty}}</td>
<td>{{pro.cost}}</td>
<td>{{pro.total}}</td>
<td>[<a href ng:click="removeItem($index)">X</a>]</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('json/products.json').success(function(data) {
$scope.products = data; // get data from json
});
var total = 0;
var counter = 0;
$scope.product = [];
$scope.add_to_cart = function(){
counter++;
total = parseInt(total) + parseInt(this.item.price);
$scope.product.push({
id: this.item.id,
qty: 1,
title: this.item.title,
cost: this.item.price,
total: total,
count: counter
});
}
$scope.removeItem = function(index) {
$scope.product.splice(index, 1);
}
}]);
</script>
你已经做对了。只需确保item.Image
指向正确的图像源即可。查看您的产品.json内部以调整路径。
看看这些。
-
您在浏览器中获得的图像源是否正确?
-
如果没有,请确保"json/products.json"响应更正 json 数据。
-
如果是,请在浏览器中签出图片标记的完整网址。完整的 url 可能与相对路径的预期原因不同。
附言。正如@NicBright所说,使用角度 js 是正确的。
相关文章:
- jquery如何从计算机添加图像
- 如何从 URL 数组向文档添加图像列表
- 如何在fabric js中向多边形添加图像
- Bootstrap多选-在复选框后添加图像
- 通过纯JS添加图像
- 如何在鹅毛笔JS中添加图像
- 使用java脚本添加图像进行测验
- 如何添加可拖动的“;添加图像”;jquery中的图标
- 添加图像与点svg画布
- 是否可以添加图像作为徽标颜色框
- 如何使用fabric.js添加图像过滤器
- JavaScript-添加图像:React Native XCode
- Dropzone”;addedfile”;以程序方式添加图像时不会激发
- 在使用Jquery/Javascript单击下一个和上一个按钮时动态添加图像
- 用图像替换页面,而不是添加图像
- 如何获取动态添加图像的宽度和高度
- 如何在这个javascript中添加图像链接
- 尝试在画布中单击鼠标以添加图像
- 在剑道 UI 树视图项旁边添加图像不起作用
- 如何使用BEML或JS在全屏Brightcove智能播放器中添加图像叠加