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

Question

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

我唯一想到的是在成功或错误之后将类添加到打开ng-click的allll按钮。

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

<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

在作用域上有一个属性来表示当前用户并在ng-class表达式中对其进行测试：

$scope.currentUser = null;

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

ng-class="{invalid:user.errors && currentUser == user,done:user.success && currentUser == user}"

Answer 2

另一种解决方案：

<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

Answer 3

不是将函数myFunction附加到$ scope，而是希望将它附加到每个用户......

for(var i=0;i<users.length;i++){
    users[i].myFunction= function(id){...}
}

然后为你的ng级课程。

ng-class={invalid: user.errors, done:user.success}