使用 angularjs 更改 li 中的跨度文本

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