使用angularjs更改li中的span文本(changing span text in li using angularjs)

使用angularjs更改li中的span文本(changing span text in li using angularjs)

我有类似......的HTML

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

在ng-click = makeActive（）上，我想将值'arrow_down'仅更改为该特定<li>元素的'arrow_right'。 如果再次单击相同，我想将其更改为“arrow_down”。 休息所有<li>将使span文本保持不变。 我怎么能用angularjs做到这一点？ 即使用angular.element？ 还有其他方法吗？

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?

最满意答案

keyboardArrow只引用一个变量。 因此，您必须创建两个范围变量： keyboardArrow1和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>

更新

根据您的需要，这里有一个吸烟者 。

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.

使用angularjs更改li中的span文本(changing span text in li using angularjs)

我有类似......的HTML

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

在ng-click = makeActive（）上，我想将值'arrow_down'仅更改为该特定<li>元素的'arrow_right'。 如果再次单击相同，我想将其更改为“arrow_down”。 休息所有<li>将使span文本保持不变。 我怎么能用angularjs做到这一点？ 即使用angular.element？ 还有其他方法吗？

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?

最满意答案

keyboardArrow只引用一个变量。 因此，您必须创建两个范围变量： keyboardArrow1和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>

更新

根据您的需要，这里有一个吸烟者 。

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.