Затенение/цвет выбранного элемента (содержимое) и добавление значка-значка AngularJS

Question

Мой вопрос связан Я думаю, что для jquery, angularjs и bootstrap.

Я передаю информацию, поступающую с бэкэнда и представленную на лицевой стороне в виде нескольких ящиков. Я пытаюсь получить «эффект выбора элемента», который, когда кто-то нажимает на один или несколько ящиков, весь блок становится темнее (или предпочтительно синий с некоторым уровнем прозрачности), и на нем появляется ok-checkmark. Элемент на самом деле является бутстрапом Ну с некоторым содержимым внутри.

В настоящее время у меня есть событие 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 { 
 
    
 
\t border-color:#8CC63F; 
 
\t float:left; 
 
\t margin-right: 20px; 
 
\t 
 
} 
 

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

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

<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>   \t \t \t \t \t \t \t \t 
 
    </div> 
 
    </div> 
 
</div>

Так как я уже говорил, как он работает в настоящее время является то, что выбранные скважины меняют свой фон цвет, но это все. Как затемнить/раскрасить весь колодец, включая содержимое, и как добавить значок поверх этого фона (внутри колодца) после щелчка мышью?

Answer 1

Вы могли бы сделать нг-шоу/нг скрытие в элементах внутри DIV также:

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

Это покажет содержимое, если коллекция не установлен, а флажок, если коллекция проверено.