Question

我试图重置所有按钮的背景颜色（bgNeutral），除了唯一被请求的人（必须切换＆＃34; bgSelected＆＃34;）

<button ng-class="button1" ng-click="addActifOnMe($1)" class="bgSelected"></button>
<button ng-class="button2" ng-click="addActifOnMe($2)" class="bgNeutral"></button>
<button ng-class="button3" ng-click="addActifOnMe($3)" class="bgNeutral"></button>

这是我的.js：

app.controller("angularController", function ($scope) {
    $scope.button1 = "bgSelected";

    $scope.addActifOnMe = function (1) {
        $scope.button2 = "bgNeutral";
        $scope.button3 = "bgNeutral";
        $scope.button1 = "bgSelected";
    };

    $scope.addActifOnMe = function (2) {
        $scope.button1 = "bgNeutral";
        $scope.button3 = "bgNeutral";
        $scope.button2 = "bgSelected";
    };

    $scope.addActifOnMe = function (3) {
        $scope.button1 = "bgNeutral";
        $scope.button2 = "bgNeutral";
        $scope.button3 = "bgSelected";
    };
});

CSS可以是这样的：

.bgSelected{
background-color: red;
}

.bgNeutral{
background-color: blue;
}

但实际上，这并不起作用......我试图在我的函数中使用带有$ event的ngClick。有人有更好的方法吗？

谢谢！最好的问候。

Answer 1

您可以使用控制器中的变量selectedButton来跟踪选择的按钮。

<button class="neutral" ng-class="{selected: todoList.selectedButton === 1}" ng-click="todoList.select(1)">button 1</button>
<button class="neutral" ng-class="{selected: todoList.selectedButton === 2}" ng-click="todoList.select(2)">button 2</button>
<button class="neutral" ng-class="{selected: todoList.selectedButton === 3}" ng-click="todoList.select(3)">button 3</button>

控制器：

angular.module('todoApp', [])
    .controller('TodoListController', function() {
        var todoList = this;
        todoList.selectedButton = 1;

        todoList.select = function(buttonNumber) {
            todoList.selectedButton = buttonNumber;
        }
    });

Here's a plunker to demonstrate this working

得到Ng点击按钮的起源？

1 个答案: