Как использовать изменение размера компонента div при нажатии?

Question

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

//html code

 <div layout="row">
    <div style="margin-left: 10px;">
       <md-whiteframe flex="100" class="md-whiteframe-1dp" layout="column" 
             layout-align="start center">
           <p class="camera_id">Camera 1</p>
           <video width="620" height="520" type="video/mp4" 
                src="..\..\assets\VID-20171205-WA0014.mp4" controls></video>
       </md-whiteframe>
     </div>
     <div layout="row" layout-wrap>
       <div style="margin:0px 10px 12px 40px;" layout="row" ng-repeat="item in 
              cameraLst">
           <div>
             <md-whiteframe flex="100" class="md-whiteframe-1dp" 
                        layout="column" layout-align="start center">
                <p class="camera_id">{{item.name}} </p>
                <video width="350" height="230" src={{item.url}} controls> 
                </video>
             </md-whiteframe>
           </div>
       </div>
      </div>
</div>

//js code

 $scope.cameraLst = [
            {
                "name": "camera 2",
                "url": "https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
            }, {
                "name": "camera 3",
                "url": "https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
            }, {
                "name": "camera 4",
                "url": "https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
            }, {
                "name": "camera 5",
                "url": "https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
            }
        ];

При нажатии любойКамера, выбранная камера должна изменить размер и занять место камеры по умолчанию 1.Пожалуйста, помогите с кодом.

Answer 1

Используйте класс CSS, например «Активный». Добавьте также новое свойство к объекту item, например, «selected». Когда вы можете установить это значение для события щелчка и использовать ng-class = "{'active': item.selected}"