angular.js ng-隐藏不工作

Question

我在使用 ng-hide 时遇到问题。使用下面的所有代码，在我添加 ng-hide 属性之前，我能够让一切按照我想要的方式工作，此时它拒绝显示任何图像。如果我将其排除在外，所有图像都会像我预期的那样显示，让我相信我的控制器工作正常并且我已正确连接到它。我不明白什么？此外，您会看到我在函数中放置了一个警报以确保它被调用，但我终生无法使用 angular.

使警报框正常工作

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);
    }
}
}

Answer 1

我想你只是错过了 vm。试试 ng-hide="!vm.isCurrentImage($index)".

angular.js ng-隐藏不工作

angular.js ng-hide not working

alert

angularjs

ng-hide