Angular JS, Меню изображения

Question

Angular JS, Меню изображения

0

Я хочу разработать приложение, использующее изображения в качестве кнопки меню, однако хочу размыть другие изображения, которые не были нажаты, или изменить цвет изображения, которое было нажато. пожалуйста, помогите мне в этом, я новичок в использовании angularjs
Состояние системы

        <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">System<br>Settings</p>                       
            </a>             
        </div>

         <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">Time and Date<br></p>                       
            </a>             
        </div>

         <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">Firmware<br>Update</p>                       
            </a>             
        </div>

        <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">USB<br>Devices</p>                       
            </a>             
        </div>
      </div>

bleykFaust 02 дек. 2015, в 03:24

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Imtiaz · Accepted Answer · 2015-12-01T23-54-00.000Z

Надеюсь, я правильно понимаю вашу проблему. Пожалуйста, ознакомьтесь с этим кодом Codepen

Объяснение: В ng-классе я даю условие, если значение toggleObject.item равно значению индекса в списке, а затем установите класс для образа-активного. В контроллере я инициализировал toggleObject.item на -1, поэтому, если вы не нажмете условие элемента, оно не будет выполнено, и класс с активным использованием изображения не будет применяться.

CSS:

.image-active{
filter: blur(0px) !important;
   -webkit-filter: blur(0px) !important;
}

.image-deactive{
  filter: blur(20px);
   -webkit-filter: blur(20px);

}

HTML:

 <img class="image-deactive" ng-class="{'image-active' : toggleObject.item == $index}" ng-src={{client.image}} alt="">

ДИСПЕТЧЕР:

$scope.toggleObject = {item: -1};

спасибо, я хотел бы спросить, где я должен поставить часть контроллера?
спасибо, я хотел бы спросить, где часть я должен поставить контроллер?
Вы можете либо поместить контроллер внутри HTML в тег <script> над </ body>, либо создать отдельный файл .js и ссылаться на него после загрузки angularjs.