javascript - ng-class 仅适用于 ng-repeat angularjs 中的当前范围

Question

我在使用 AngularJS 的 ng-class 部分时遇到了问题。

我唯一想到的就是在成功或错误后将类添加到 ng-click 开启的所有按钮中。

但我只想添加/更改当前单击元素的类。这在某种程度上是可能的吗？

<section ng-repeat="user in users">

    <button class="btn" ng-click="myFunction(user);" ng-class="{invalid:errors,done:success}"></button>

</section>

<script>
function UsersController($scope, $http) {
    $http.get('/users.json').success(function(users) {
        $scope.users = users;

        $scope.errors = false;
        $scope.success = false;
    });

    $scope.myFunction = function(user) {
        $http.post('/myUrl/'+user.id, student)
        .success(function(data, status, headers, config) {
            // $scope.success = true;
            user.success = true;
        })
        .error(function(data, status, headers, config) {
            // $scope.errors = true;
            user.errors = true;
        });
    }
}
</script>

我想要的只是当前范围，但这不起作用。

除了传递 ng-class 值之外，我的函数确实有效。

Answer 1

另一个解决方案:

<section ng-repeat="user in users">
    <button class="btn" ng-click="myFunction(user)" 
            ng-class="{invalid: isInvalid(user), done: isSuccess(user)}">{{user.name}}</button>
</section>

因此，您创建 isInvalid 和 isSuccess 函数并传入当前的 user 对象:

$scope.isSuccess = function(user) {
    return user === $scope.state.success;
};

$scope.isInvalid = function(user) {
    return user === $scope.state.errors;
};

这两个函数可以判断当前用户是无效还是成功。例如，当出现错误时，您可以这样设置:

$scope.state = {
    success: false,
    errors: user
};

演示:http://plnkr.co/edit/RDJy9VsRkhAO0cFnb6AV?p=preview