Нажатие на переключатель не показывает другой div

Я новичок в bootstrap и angularjs, и я пытаюсь создать что-то довольно простое, но, как кажется, есть какая-то проблема, которую я не вижу.Нажатие на переключатель не показывает другой div

Я хочу показать div, если значение радио равно true и скрыть его, если значение радио является ложным. Это код, который у меня есть до сих пор - я изучал примеры в Интернете, все они, похоже, делают то же самое, что и я.

Я не определил никаких контроллеров до сих пор, только этот HTML-файл (JSFiddle):

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
</head> 

<body> 
    <div class="container"> 
     <form> 
      <div class="row"> 
       ... 
      </div> 

      ... 

      <div class="row"> 
       <div class="col-md-2"> 
        <label>Wunschpartner</label> 
       </div> 

       <div class="col-md-10"> 
        <div class="btn-group" data-toggle="buttons"> 
         <label class="btn btn-default active"> 
          <input type="radio" name="preferredDealer" value="false" ng-model="preferredDealer" data-ng-value="false" checked> Nein 
         </label> 

         <label class="btn btn-default"> 
          <input type="radio" name="preferredDealer" value="true" ng-model="preferredDealer" data-ng-value="true"> Ja 
         </label> 
        </div> 
       </div> 
      </div> 
      Test: {{hasOne}} <!-- Displays no value at all --> 
      <div class="row" ng-show="preferredDealer"> 
       <div class="col-md-4"> 
        <label for="text">Name</label> 
        <input type="text" class="form-control" placeholder="Garage Max Muster"> 
       </div> 

       <div class="col-md-2"> 
        <label for="text">PLZ</label> 
        <input type="text" class="form-control" placeholder="1234"> 
       </div> 

       <div class="col-md-6"> 
        <label for="text">Ort</label> 
        <input type="text" class="form-control" placeholder="Musterhausen"> 
       </div> 
      </div> 
     </form> 
    </div> 
</body> 
</html>

достаточно интересно, если я заменю радиостанции с текстовым полем, имеющим ng-model="preferredDealer" и типа true в него, это 'Отобразим div - как только я изменю его на что-то иное, кроме true, оно скроется.

Что мне здесь не хватает?

источник

2015-03-12 Ahatius

Кажется правильным, любые ошибки в консоли? –

Это известная ошибка в Bootstrap 3:

https://github.com/angular/angular.js/issues/4516

использованием данных-переключатель предотвращает модель, которая будет обновлена.

источник

2015-03-12 16:30:19 syymza

Вау, спасибо за информацию. Какое совпадение, первое, что я хочу попробовать, это багги, отключение до отличного старта: O – Ahatius

<body ng-app> 
    <div class="container"> 
    <form> 
     <label>Wunschpartner</label> 
     <label class="btn btn-default"> 
          <input type="radio" name="preferredDealer" value="false" ng-model="preferredDealer" > Nein</label> 


    <label class="btn btn-default"> 
          <input type="radio" name="preferredDealer" value="true" ng-model="preferredDealer" > Ja</label> 


    </form> 

      Test<!-- Displays no value at all --> 
      <div class="row" ng-show="preferredDealer"> 
       <div class="col-md-4"> 
        <label for="text">Name</label> 
        <input type="text" class="form-control" placeholder="Garage Max Muster"> 
       </div> 

       <div class="col-md-2"> 
        <label for="text">PLZ</label> 
        <input type="text" class="form-control" placeholder="1234"> 
       </div> 

       <div class="col-md-6"> 
        <label for="text">Ort</label> 
        <input type="text" class="form-control" placeholder="Musterhausen"> 
       </div> 
      </div> 



    </div> 
    </body>

источник

2015-03-12 16:15:58 Prathyusha

Спасибо за рабочую версию :) Я решил использовать один флажок вместо этого, так как он выглядит красивее, поскольку радио точка в окне выглядит странно :) – Ahatius

Нажатие на переключатель не показывает другой div

ответ

Смежные вопросы