Блог

Главная - Вопросы по программированию - Как я могу изменить переключатели на div?

Как я могу изменить переключатели на div?

#angularjs

Вопрос:

Я абсолютно новичок в Angular.js, Я получил файл от кого-то, чтобы исправить. Итак, вопрос в том, что я действительно хочу изменить div с помощью кнопок, поэтому я попытался найти его и нашел решение с помощью переключателя, но дело в том, что я хочу нажать div. Итак, вот мой код :

         
  let vm = $scope
    vm.isShown = function (color) {
    return color === vm.color;
  };
  
  //this is the function in a controller  
  <div class="item">
            <span class="group-name"
              ><p>PHASE 1.0</p>
              Closed API Data Market</span
            >

            <input type="radio" ng-model="color" value="oneZero" /> 1.0
          </div>
          <div class="item">
            <span class="group-name"
              ><p>PHASE 1.5</p>
              Open API Data Market</span
            >
            <input
              type="radio"
              ng-model="color"
              value="oneFive"
              checked="checked"
            />
            1.5<br />
          </div>
        </div>
      </div>

      <br />
      <div class="servicePreparing" ng-show="isShown('oneZero')">
        <img src="assets/img/serviceStop.jpg" />
      </div>
      <div class="select-list-area" ng-show="isShown('oneFive')">

Я хочу удалить входные данные и хочу щелкнуть с div в качестве имени класса как «элемент»

Комментарии:

1. Мне непонятно, каким вы хотите видеть такое поведение, но похоже, что вам нужно щелкнуть правой кнопкой мыши на div.

Ответ №1:

Вы можете увидеть один пример жизни здесь: https://plnkr.co/edit/flMIhl6ugNUNXwpE

Кроме того, вам нужно установить одну переменную (в переключателях были color ), поэтому в вашем контроллере AngularJS:

 vm.color = '';

И установите это значение ng-click в обоих дивах с определенным значением, по вашему мнению, у вас будет:

 <div class="btn" ng-click="color = 'oneZero'">1.0</div>
<div class="btn" ng-click="color = 'oneFive'">1.5</div>
<div class="servicePreparing" ng-show="isShown('oneZero')">
  One Zero Image Showed
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
  One Five Image Showed
</div>
Метки: