0

私はブートストラップとangularjsが初めてで、かなり単純なものを作成しようとしていますが、見えない問題があるようです。

ラジオの値が true の場合は div を表示し、ラジオの値が 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 以外に変更するとすぐに非表示になります。

ここで何が欠けていますか？

4

2 に答える 2