ng-class only for current scope in ng-repeat angularjs

I'm having trouble with the ng-class part of AngularJS.

The only thing I figured out was adding the class after a success or error to allll buttons where the ng-click was on.

But I only want to add/change the class of the currently clicked element. Is that even possible in a way?

<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>

What I want is just the current scope, but that doesn't work.

My function does work, except for passing the ng-class values trough.

Answers


Another solution:

<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>

So you create isInvalid and isSuccess functions and pass in current user object:

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

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

These two functions can decide if current user is invalid or successful. For example when there is an error you set it like this:

$scope.state = {
    success: false,
    errors: user
};
Demo: http://plnkr.co/edit/RDJy9VsRkhAO0cFnb6AV?p=preview

Have a property on the scope to represent the current user and a test for it in the ng-class expression:

$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}"

Instead of attaching the function myFunction to the $scope, you want to attach it to each user as such...

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

and then for your ng-class you do.

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

Need Your Help

How to find temporal overlap in a time-indexed DataFrame

python pandas time-series

I have a DataFrame in which the index is a date_time and the data in the columns is interleaved over time. Perhaps the best explanation would be to show this DF:

Parsing json with nested arrays with Gson

java android json gson

I am new to Gson parsing and did few basic Gson parsing. But this time my JSON is much complex. My JSON looks like :