Question

我希望当功能（响应）返回时，我希望用户能够在按钮单击时将类从不完整更改为完成。但是，我尝试过使用问题;它不能正常工作，因为HTML元素加载了PHP循环，因此ng-class表达式不起作用。这是因为运行if语句检查它是不完整还是完整，而AngularJS表达式在这种意义上无法检查数据库。

我添加了'active'变量，但我似乎无法在没有ng-class的情况下使用它。是否有替代jQuery的类添加/删除？或者有人可以想到另一种解决方案。

HTML：

<div class='task col-md-4 incomplete'>
    <button data-ng-click='toggleTask(".$lesson_id.", 0)' class='btn btn-default'>Mark as complete</b></button>
</div>

AngularJS：

var app = angular.module('training-center', []);
app.controller('task-manager', function(\$scope, \$http) {\
  $scope.toggleTask = function(id, active) {\
    $scope.id = id;\
    $http.post('app/modules/Controller.php?action=toggleTask', {
      task_id: id,
      active: active
    }).
    then(function(response) {
        if (response.data == '1') {
          //What do I place here?
        }
      },
      function(response) {

      });
  };
});

Answer 1

您不必使用ng-class - 您可以使用常规类并使用{{}}将参数放入其中。然后只需更改$ scope中的变量，它就会自动调整其行为。

以下是一个例子：

<div ng-app>
<div ng-controller="testCtrl">
    <div id="test" class="{{className}}">
        {{className}}
    </div>
    <a href="#" ng-click="increase();">Click</a>
</div>
</div>

控制器代码（它很难看，但你会明白这一点）：

function testCtrl($scope) {
    $scope.className = "red";

    $scope.increase = function() {
        if($scope.className == "red")
            $scope.className = "blue";
        else if($scope.className == "blue")
            $scope.className = "green";
        else if($scope.className == "green")
            $scope.className = "red";
    }
}

（当然，课程很简单）：

.red {    color: #FF0000; }
.blue {    color: #0000FF;}
.green {    color: #00FF00;}

这对我来说很好。我没有在PHP生成页面主体的环境中测试它，但不应该有所作为。

AngularJS在没有ng-class的情况下更改类

1 个答案: