CODEWITHSUNDEEP
javascriptangularjshtml-lists
ghetal
ghetal

Reputation: 403

changing span text in li using angularjs

I have html something like...

<ul id="sidemenu" class="wraplist wrapper-menu">
 <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
    <span class="arrow material-icons">arrow_down</span>
 <li>
 <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
    <span class="arrow material-icons">arrow_down</span>
 <li>
<ul>

on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?

Upvotes: 0

Views: 3095

Answers (2)

Alteyss
Alteyss

Reputation: 513

keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2

<ul id="sidemenu" class="wraplist wrapper-menu">
     <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
        <span class="arrow material-icons">{{ keyboardArrow1 }}</span>
     <li>
     <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
        <span class="arrow material-icons">{{ keyboardArrow2 }}</span>
     <li>
<ul>

Update

According to your needs, here is a plunker.

Upvotes: 1

Mistalis
Mistalis

Reputation: 18309

Updated my answer from our discussion in comments.

1) In your controller, define keyboardArrow1 and keyboardArrow2:

$scope.keyboardArrow1 = 'A';
$scope.keyboardArrow1 = 'B';

2) You can now display theses values like this:

<ul> 
  <li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)">
    {{keyboardArrow1}}
  </li>
  <li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)">
    {{keyboardArrow2}}
  </li>
</ul>

Note that I also changed the ng-class condition.

3) When clicking a <li>, call makeActive():

$scope.makeActive = function(arrow) {
    $scope.active = arrow;
}

Upvotes: 0

Related Questions