javascript - 使所选元素(内容框)变暗/着色并添加复选标记图标 AngularJS

Question

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

我正在渲染来自后端的信息，并以几个框的形式呈现在前端。我试图获得一种“元素选择效果”，当有人单击一个或多个框时，整个框会变暗(或者最好是具有一定透明度的蓝色)，并且上面会出现一个确定复选标记。该元素实际上是一个 Bootstrap 井，里面有一些内容。

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

这是我的相关代码片段(简化的对象，无后端):

var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {

  $scope.collections = [
    {text:'content collection1'},
    {text:'content collection2'}];
  $scope.selectBox = function(collection){

    collection.isclicked =! collection.isclicked;
    $("#well").click(function(){
      if (collection.isclicked){
        //$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
      }
    });
  }
});

.well:hover{
  cursor:pointer;
  cursor:hand;
  color: #555;
  text-decoration: none;
  background-color: #C0C0C0;
} 

.well {
 
	border-color:#8CC63F;
	float:left;
	margin-right: 20px;
	
}

.well-active {
 	
	background-color:#3399ff;
	
}

.well-active:hover {
 	
	background-color:#3399ff;
	
}

<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}">
      <div>{{collection.text}}</div>          								
    </div>
  </div>
</div>

正如我所提到的，它现在的工作方式是选定的孔改变其背景颜色，但仅此而已。如何使整个孔(包括内容)变暗/着色，以及如何在单击鼠标后在该背景顶部(孔内)添加图标？

Answer 1

您可以在井 div 内的元素中执行 ng-show/ng-hide:

<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>

如果未选中集合，则会显示内容；如果选中集合，则会显示复选标记。