Angularjs 单击时的角度切换属性，并在事件完成时重置该属性

我有两个播放按钮，需要在单击时切换它们的活动类。当曲目播放完毕后，我需要删除特定按钮的活动类

视图：

<div class="audio-player" ng-repeat="sample in audioCtrl.audioSamples">
    <button class="play-btn" ng-click="audioCtrl.play(sample.sampleId); toggle = !toggle" ng-class="{'active' : toggle}"></button>
</div>

---

您只需将“toggle”变量添加到控制器（或直接添加到$scope）。无论哪种方法都可以，但我建议将其添加到控制器中。你可以这样做

控制器（假设“audioPlayer”是控制器“this”）：

视图：

---

我已经介绍了两种方法，可以动态切换特定相册上的类，我建议使用指令方法。但是，当您发出HTTP请求时，另一个可能会更有帮助

函数exampleController（$scope、$q、$timeout）{
$scope.audioSamples=[{
id:1，
姓名：“一”
},
{
id:2，
姓名：“两个”
},
{
id:3，
姓名：“三”
},
{
id:4，
姓名：“四”
}
];
$scope.play=功能（事件）{
var deferred=$q.deferred（）；
var elm=event.target；
角度元素（elm）.addClass（“活动”）；
$timeout（函数（）{
deferred.resolve（angular.element（elm.removeClass）（“active”）；
回报。承诺；
}, 5000);
};
}
函数exampleDirective（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素绑定（“单击”，函数（）{
返回元素。hasClass（“活动”）？
元素。removeClass（“活动”）：
元素。添加类（“活动”）；
});
}
};
}
有棱角的
.模块（“应用程序”，[]）
.controller（“exampleController”，exampleController）
.指令（“exampleDirective”，exampleDirective）
。容器流体{
背景色：#1D1F20；
颜色：#fff；
字体大小：14px；
字体大小：粗体；
填充物：5%10%10%10%；
文本对齐：居中；
}
.btn容器{
显示：内联；
}
.播放btn{
利润率：10px；
过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）0.5s；
}
.主动{
字体大小：粗体；
字体大小：20px；
}

audioPlayer只是对音频元素的引用，因此使用此解决方案，我可以切换两个按钮。我需要找到一种方法，在onended事件完成后，只针对一个按钮。仅更新该按钮的切换属性。谢谢。$event参数是关键。我一直试图避免接触DOM，而是想办法更新切换属性。但在某些情况下，像这样直接操作DOM可能没什么问题。
audioPlayer.onended = function () {
  // Can I set toggle false here somehow?
};

audioPlayer.toggle = false;

<div class="audio-player" ng-repeat="sample in audioCtrl.audioSamples">
    <button class="play-btn" ng-class="{'active' : audioCtrl.toggle}"
            ng-click="audioCtrl.play(sample.sampleId); audioCtrl.toggle = !audioCtrl.toggle">
    </button>
</div>