0

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

如果单选的值为真，我想显示一个 div，如果单选的值为假，我想隐藏它。这是我到目前为止的代码 - 我查看了互联网上的示例，它们似乎都像我一样做。

到目前为止，我还没有定义任何控制器，只是这个 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 - 一旦我将它更改为非真值，它就会隐藏。

我在这里想念什么？

4

2 回答 2

2

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

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

使用 data-toggle 可以防止模型被更新。

于 2015-03-12T16:30:19.150 回答
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>
于 2015-03-12T16:15:58.433 回答