Question

我需要两种可以改变元素类的按钮。每个按钮代表一个不同的类。

我尝试在ng-click中传递$ index但似乎无法正常工作..任何建议都将非常感谢！： - ）

一些造型

<style>
.class1 {color: red;}
.class2 {color: green;}
</style>

视图

    <div ng-model="myClasses">

    <a href="#" ng-click="itemClick($index)">1'eren</a>
    <a href="#" ng-click="itemClick($index)">2'eren</a>
    <p class="{{myClasses}}">Torben {{myClasses}}</p>

    </div>

我的Angular

<script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.myClasses = "class0";


      $scope.itemClick = function ($index){
        if ($index == 1){
          $scope.myClasses = "class1";
        } else if ($index == 2) {
          $scope.myClasses = "class2";
        } else {
          $scope.myClasses = "class1";
        }
      };
    });
  </script>

A plunker

Answer 1

$ index未在视图中定义（主要在ng-repeat指令内定义）。所以你可以这样做。只需将html代码替换为：

<div ng-model="myClasses">

    <a href="#" ng-click="itemClick(1)">1'eren</a>
    <a href="#" ng-click="itemClick(2)">2'eren</a>
    <p ng-class="{{myClasses}}">Torben {{myClasses}}</p>

</div>

Answer 2

Here是更新的插件，显示了如何以正确的方式执行此操作。

 <div>

<br><br><br>
<a href="#" ng-click=activeClass='class1'>1'eren</a>
<a href="#" ng-click=activeClass='class2'>2'eren</a>
<p ng-class="activeClass">Torben {{myClasses}}</p>

var app = angular.module('plunker', []);  

 app.controller('MainCtrl', function($scope) {
  // default class
  $scope.activeClass = "class0";

});

Answer 3

您应该使用ng-class

<div ng-model="myClasses">
    <a href="#" ng-click="itemClick(1)">1'eren</a>
    <a href="#" ng-click="itemClick(2)">2'eren</a>
    <p ng-class="myClasses">Torben {{myClasses}}</p>
</div>

在AngularJS中使用ng-click更改类

3 个答案: