Question

我有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'更改为该特定＆lt;的'arrow_right'李＆GT;仅元素。如果再次单击相同，我想将其更改为“arrow_down”。全部休息＆lt;李＆GT;将使span文本保持不变。我怎么能用angularjs做到这一点？即使用angular.element？还有其他方法吗？

Answer 1

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>

更新

根据您的需要，这是一个plunker。

Answer 2

通过评论中的讨论更新了我的答案。

1）在您的控制器中，定义keyboardArrow1和keyboardArrow2：

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

2）您现在可以显示以下值：

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

请注意，我还更改了ng-class条件。

3）点击<li>时，请致电makeActive()：

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

使用angularjs更改li中的span文本

2 个答案:

更新