ngClick toggle类正在影响所有元素

Question

我有一组元素，当单击一个元素时，应该切换一个类。我遇到的问题是，当单击其中一个元素时，所有元素都会收到切换类。

<div layout="row" layout-align="space-between center" class="editor-row">

<div flex="initial">
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}">
        <md-checkbox ng-model="data.fontStyle.bold" aria-label="Bold" entersubmit="ok()">Bold</md-checkbox>
    </div>
</div>

<div flex="initial">
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}">
        <md-checkbox ng-model="data.fontStyle.italic" aria-label="Italic" entersubmit="ok()">Italic</md-checkbox>
    </div>
</div>

<div flex="initial">
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}">
        <md-checkbox ng-model="data.fontStyle.shadow" aria-label="Shadow" entersubmit="ok()">Shadow</md-checkbox>
    </div>
</div>

Answer 1

它们都在相同的范围内，因此toggle.state变量是相同的。

更改为：toggleBold.state，toggleItalic.state，...

Answer 2

所有元素都引用相同的toggle.state

当您点击第一个时，toggle.state变量更改并且所有具有ng-class="{'focus' : toggle.state}"的元素都会受到影响。