CODEWITHSUNDEEP
javascripthtmlcssangularjs
GettingStarted
GettingStarted

Reputation: 7605

how to dynamically remove css in Angular?

.items {
  color: black;
  background-color: white;
  -webkit-transition:all cubic-bezier(0.250,0.460,0.450,0.940) 0.5s;
  transition:all cubic-bezier(0.250,0.460,0.450,0.940) 0.5s;
}

.items.currentlySelected {
  color: orange;
  background-color: yellow;
  font-size: 3em;
}
<div ng-repeat="returnedUser in returnedUsers" value="set" ng-click="myVar='currentlySelected'">
  <span class="items" ng-class="myVar">
    <a href="#" ng-click="getRepoData(returnedUser);">{{returnedUser.login}}</a>
  </span>
</div>

$scope.getRepoData = function(singleUser) {
    $scope.selectedUser = singleUser;
    $http.get(singleUser.repos_url).
        success(function(data,status) {
            if(status===200) {
                $scope.returnedRepos = data;
            }
        }).
        error(function(data,status){
            alert("something happened in single user");
        });
}

When I click the link, it works beautifully. However when I want to select another link, I want to restore the link back to items (from items.currentlySelected) before applying my css on the newly selected link

How do I do this using Angular (no jquery please)

Upvotes: 0

Views: 2751

Answers (2)

devqon
devqon

Reputation: 13997

You are using a global scope variable for all items (myVar). Instead, conditionally apply the class if the id is equal to the selected:

<div ng-repeat="returnedUser in returnedUsers" value="set"
     ng-click="selected=returnedUser"> <!-- Assign current to selected variable -->
    <span class="items" 
          ng-class="{ 'currentlySelected': returnedUser.id == selected.id }"> <!-- Apply class 'currentlySelected' if selected.id is equal to returnedUser.id -->
        <a href="#" 
           ng-click="getRepoData(returnedUser);">
            {{returnedUser.login}}
        </a>
    </span>
</div>

Upvotes: 0

Shamoon
Shamoon

Reputation: 43501

First remove the ng-click from the div that has ng-repeat. Next in your getRepoData function, do something where you set the currently clicked item to some $scope-bound variable. Let's say that variable is $scope.selectedRepo.

Now, to set the class dynamically for your span, you'd have:

<span ng-class="{active: selectedRepo.id === returnedUser.id}">

Upvotes: 1

Related Questions