单击单选按钮不显示其他 div

Question

我是 bootstrap 和 angularjs 的新手，我正在尝试创建一些相当简单的东西，但似乎有一些我看不到的问题。

我想在 radio 的值为 true 时显示 div，在 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 - 只要我更改它对于不是真实的东西，它会隐藏。

我在这里错过了什么？

Answer 1

<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>

Answer 2

这是 Bootstrap 3 中的一个已知错误：

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

使用数据切换可防止更新模型。

单击单选按钮不显示其他 div

Clicking radio button doesn't show other div

angularjs

angularjs-ng-show