ng-hide の使用に問題があります。以下のすべてのコードを使用すると、ng-hide 属性を追加するまで、すべてを希望どおりに機能させることができます。その時点で、画像の表示が拒否されます。省略した場合、画像はすべて期待どおりに表示され、コントローラーが正しく機能していて、正しく接続されていると信じてしまいます. 私は何を理解していませんか？また、関数にアラートを入れて、それが呼び出されていることを確認しますが、角度を使用してアラートボックスを機能させることはできません。
app.js
(function () {
var app = angular.module("mainApp", []);
app.controller("StoriesListController", ["$http", StoriesListController]);
function StoriesListController($http) {
var vm = this;
vm.title = "Tutorial List";
vm.imageIndex = 0;
activate();
function activate() {
vm.stories = [];
$http.get("api/Story").then(function (response) {
vm.stories = response.data;
});
}
vm.setCurrentImage = function (index) {
vm.imageIndex = index;
};
vm.isCurrentImage = function (index) {
alert(index);
return vm.imageIndex === index;
};
}
}());
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainApp">
<head>
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
<link href="/Content/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>TEST</h1>
<div ng-controller="StoriesListController as vm">
<h1>{{vm.title}}</h1>
<div class="container slider">
<div ng-repeat="story in vm.stories">
<img ng-src="{{story.PreviewImageURL}}" ng-hide="!isCurrentImage($index)" class="slide" />
</div>
</div>
</div>
</body>
</html>
StoryController.cs (ストーリーを埋めるために呼び出している API)
namespace AngularWebApi.Controllers
{
public class StoryController : ApiController
{
private static readonly List<Story> apps = new List<Story>
{
new Story
{
ID = 1,
Name = "Test 1",
Descript = "Test 1 Desc",
PreviewImageURL = "/Images/Test1.png",
Views = 1,
Ranking = 1
},
new Story
{
ID = 2,
Name = "Test 2",
Descript = "Test 2 Desc",
PreviewImageURL = "/Images/Test2.png",
Views = 1,
Ranking = 2
},
new Story
{
ID = 3,
Name = "Test 3",
Descript = "Test 3 Desc",
PreviewImageURL = "/Images/Test3.png",
Views = 1,
Ranking = 3
},
};
public IHttpActionResult Get()
{
return Ok(apps);
}
}
}