Question

我有一个非常简单的应用程序，只有几个按钮。单击该按钮时，应应用活动的css。由于某种原因，它不适合我，

控制器：

'use strict';
angular
    .module('myApp')
    .controller('summaryCtrl', ['$scope', function ($scope){


            $scope.buttons=[
                {time:'1 Hour'},
                {time:'2 Hours'},
                {time:'24 Hours'},
                {time:'48 Hours'},
                {time:'1 Week'},
                {time:'1 Month'}
            ];

        $scope.selected = $scope.buttons[0];

        $scope.select= function(item) {
            $scope.selected = item;
        };

        $scope.isActive = function(item) {
            return $scope.selected === item;
        };

    }]);

导航：

<div ng-controller="summaryCtrl">
    <ul>
      <li ng-repeat="button in buttons" id="{{ button.time }}"   ng-click="selectButton($index)" ng-class="{active: $index===selectedButton}">{{ button.time }}</li>
    </ul>
</div>

此处的Plunker：http://plnkr.co/edit/0WxnRVwaHwCBGM6wXNtS?p=preview

非常感谢你的帮助。

Answer 1

您在selectButton指令中调用了ng-click方法，但此方法并不存在于$scope中。你将它命名为select()。此外，您在selectedButton指令中使用的属性ng-class不是包含所选按钮的属性。它只是selected，就像您在$scope.select()方法中指定它一样。

试试这样：

<div ng-controller="summaryCtrl">
    <ul>
      <li ng-repeat="button in buttons" id="{{ button.time }}" ng-click="select($index)" ng-class="{active: $index === selected}">{{ button.time }}</li>
    </ul>
</div>

Angularjs活动状态不适用于单击的按钮

1 个答案: