Нажатие переключателя не отображает другой div

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

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

Пока я не определил никаких контроллеров, только этот 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, оно будет скрыто.

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

Источник

2 ответа

Решение

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

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

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

Источник 
<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>
Источник
Другие вопросы по тегам