javascript - data-ng-class 中的函数没有被调用

Question

我正在尝试用 Angular 构建一个基本项目。我想根据 data-ng-class 中调用的函数返回的值对列表项进行着色。

这是我的部分 html 文件。

<div>
    Rooms:<ul style="list-style:none;">
        <li style="display:inline-block; padding:20px;" 
            data-ng-repeat="room in SingleDetailedCtrl.singleRooms"
            data-ng-class="getClass('room')">
    {{ room }}
        </li>
    </ul>

    To go back <a ui-sref="plan">click here</a>
</div>

对应的 Controller :

myApp.controller("SingleDetailedController", function ($log) {
    var singleSelf = this;
    this.singleRooms = ["f1-101", "f1-110", "f2-203", "f3-321", "f3-302"];
    this.sa = ["f1-101", "f2-203", "f3-302"];
    this.sna = ["f1-110", "f3-321"];
    this.getClass = function (room) {
        console.log("sdc");
        var color = red;
        angular.forEach(singleSelf.singleRooms, function (value, key) {
            if (value == room) {
                console.log("sdc if");
                color = green;
            }
        });
        return color;
    };
});

未生成我期望的控制台输出。所以，这就是我对 getClass() 函数没有被调用的理解。

我看过同一问题的不同问题。我的代码对我来说似乎没问题，但它不起作用。

非常感谢您为解决此问题提供的任何帮助。

Answer 1

您需要使用 Controller 实例，即 SingleDetailedCtrl 和方法

<li style="display:inline-block; padding:20px;" 
    data-ng-repeat="room in SingleDetailedCtrl.singleRooms"
    data-ng-class="SingleDetailedCtrl.getClass('room')">
{{ room }}
</li>