Javascript 使选定元素（内容框）变暗/上色，并添加复选标记图标AngularJS

我的问题与jquery、angularjs和bootstrap有关

我正在呈现来自后端的信息，这些信息以几个框的形式呈现在前端。我试图获得一种“元素选择效果”，当有人点击一个或多个框时，整个框变暗（或者最好是带有一定透明度的蓝色），并显示一个ok复选标记。这个元素实际上是一个引导程序，里面有一些内容

我目前有一个onClick事件，可以给背景上色，但这还不够。与图像不同，图像在更改背景颜色时可以完全变暗，使用井（或任何内容框），它只对背景进行着色，内容仍然可见。我还想在单击时在框内添加绿色复选标记图标，但我不知道如何在onClick事件之后动态添加元素

以下是我的相关代码（简化对象，无后端）：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'SelectCtrl'，函数（$scope）{
$scope.collections=[
{text:'content collection1'}，
{text:'content collection2'}]；
$scope.selectBox=函数（集合）{
collection.isclicked=！collection.isclicked；
$（“#嗯”）。单击（函数（）{
if（collection.isclicked）{
//$（“div”）。追加（“”）；
}
});
}
});
。好：悬停{
光标：指针；
光标：手；
颜色：#555；
文字装饰：无；
背景色：#C0；
} 
.嗯{
边框颜色：#8CC63F；
浮动：左；
右边距：20px；
}
.非常活跃{
背景色：#3399ff；
}
.活动良好：悬停{
背景色：#3399ff；
}

{{collection.text}
您可以在油井分区内的元素中进行ng显示/ng隐藏：

<div data-ng-controller="SelectCtrl">
  <div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
    <div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
      <span ng-hide="collection.isClicked">{{collection.text}}</span>
      <i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>                                     
    </div>
  </div>
</div>


{{collection.text}

如果未选中收藏，则显示内容；如果选中收藏，则显示复选标记。
效果很好！如此简单和简短的解决方案，谢谢！