angularJS图片数组无法正常工作。 ng-repeat无法用于ng-src

时间:2018-06-29 15:04:15

标签: angularjs angularjs-ng-repeat

图像不重复

---脚本代码---

/// <reference path="angular.js" />

var app = angular.module("myModule", [])
             .controller("myController", function ($scope) {
             var wallpost = [
                    { image: "Images/tunnel.jpg", likes: 0, dislikes: 0, 
imgName : "tunnel" },
                { image: "Images/benches.jpg", likes: 0, dislikes: 0,imgName 
: "benches" },
{ image: "Images/bridge.jpg", likes: 0, dislikes: 0 ,imgName : "bridge"}
];

                $scope.wallpost = wallpost;

                $scope.likeIncrement = function (wallpost) {
                    wallpost.likes++;
                }

                $scope.dislikeIncrement = function (wallpost) {
                    wallpost.dislikes++;
                }
            });

---- cshtml代码----

<html ng-app="myModule">
<head>
 <script src="scripts/angular.js"></script>   
<script src="scripts/JavaScript1.js"></script>
</head>
<body ng-controller="myController">

<div>

    <table ng-repeat="posts in wallpost">

 <tr>
     <img ng-src="{{ posts.image }}"  ng-alt="{{ posts.imgName }}" 
       width="200" height="100" />
 </tr>

 <tr>
       <td>
                Like : {{ posts.likes }}
       </td>
       <td>
                Dislike : {{ posts.dislikes }}
       </td>
 </tr>

 <tr>
       <td>
 <input type="button" value="Like" ng-click="likeIncrement(posts)" />
       </td>
       <td>
 <input type="button" value="Dislike" ng-click="dislikeIncrement(posts)" />
      </td>
 </tr>
  </table>
 </div>
 </body>
 </html>

注意: 1)图像在正确的文件夹中。 2)尝试单张图像时显示图像。不能正常工作。

-------输出------ enter image description here

enter image description here

每个图像都不会像不喜欢之前出现。 就像不喜欢的按钮一样工作正常。

0 个答案:

没有答案