Question

我是bootstrap和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，它会隐藏。

我在这里缺少什么？

Answer 1

这是Bootstrap 3中的已知错误：

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

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

Answer 2

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

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

2 个答案: