Angularjs活动状态不适用于点击按钮 [英] Angularjs active state not applying on clicked button

问题描述

我有几个按钮，这个非常简单的应用程序。当点击按钮主动CSS应适用。它不是为我工作由于某种原因，

I have this very simple app with a few buttons. When the button is clicked the active css should be applied. It is not working for me for some reason,

控制器：

'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

您的帮助非常感谢。

推荐答案

您拨打 selectButton 方法在 NG-点击指令，但是这种方法并不能在你的 $范围存在。你把它命名为选择（）。此外，财产 selectedButton 您在纳克级使用指令不包含选定按钮之一。它只是选像您指定它在你的 $ scope.select（）方法。

You call the selectButton method in your ng-click directive but this method doesn't exist in your $scope. You named it select(). Also, the property selectedButton you use in your ng-class directive is not the one containing the selected button. It's simply selected like you assign it in your $scope.select() method.

尝试这样的：

<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活动状态不适用于点击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！