Question

我正在尝试使用angular更改div上的div样式，我做错了什么？ index.cshtml中的代码：

<div ng-click="loadAllBooks()" ng-class="{{tagAll}}">Wszystkie</div>
        <div ng-click="loadAllAudiobooks()" ng-class="{{tagAudiobook}}">Audiobooki</div>
        <div ng-click="loadAllEbooks()"  ng-class="{{tagEbook}}">E-booki</div>

在我的样式表中，我有标记和未标记的类的样式

从我的javascript文件（更改代码底部的类的函数）：

$scope.loadAllBooks = function () {
    $scope.books = [];
    $scope.loading = true;
    $scope.changeTagStyle(0);
    $http.get("/Home/GetAllBooks").
        then(function (response) {
            $scope.books = response.data;
        }).catch(function (response) {
            $scope.books = [];
        }).finally(function () {
            console.log("Done");
            $scope.loading = false;
        });
};

$scope.loadAllAudiobooks = function () {
    $scope.books = [];
    $scope.loading = true;
    $scope.changeTagStyle(1);
    $http.get("/Home/GetAllAudiobooks").
        then(function (response) {
            $scope.books = response.data;
        }).catch(function (response) {
            $scope.books = [];
        }).finally(function () {
            console.log("Done");
            $scope.loading = false;
        });
};

$scope.loadAllEbooks = function () {
    $scope.books = [];
    $scope.loading = true;
    $scope.changeTagStyle(2);
    $http.get("/Home/GetAllEbooks").
        then(function (response) {
            $scope.books = response.data;
        }).catch(function (response) {
            $scope.books = [];
        }).finally(function () {
            console.log("Done");
            $scope.loading = false;
        });
};

$scope.changeTagStyle = function (id) {
    $scope.tagAll = "untagged";
    $scope.tagAudiobook = "untagged";
    $scope.tagEbook = "untagged";

    if ($scope.id === 0)
        $scope.tagAll = "tagged";
    else if ($scope.id === 1)
        $scope.tagAudiobook = "tagged";
    else if ($scope.id === 2)
        $scope.tagEbook = "tagged";
};

函数loadAllBooks在启动时启动，它应该运行changeTagStyle

Answer 1

您必须将代码更改为（您必须删除花括号，因为ng-class是angularjs指令，它将识别您的变量）：

<div ng-click="loadAllBooks()" ng-class="tagAll">Wszystkie</div>
    <div ng-click="loadAllAudiobooks()" ng-class="tagAudiobook">Audiobooki</div>
    <div ng-click="loadAllEbooks()"  ng-class="tagEbook">E-booki</div>

我想用角度改变点击的整个风格

1 个答案: