使用ng显示/ng隐藏(AngularJS)隐藏多个AngularJS元素

Question

日安！

因此，我试着制作单个Page，但我仍然试图使用复选框隐藏/显示div元素。由于我不知道如何制作模块、隐藏/显示元素，所以我使用google搜索了一些教程，并找到了以下代码：

var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            //This will hide the DIV by default.
            $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });

不幸的是，当我试图将这个模块应用于我的html代码时，我总是会得到以下错误：

错误: ng:areq参数'MyController‘不是函数，未定义

以下是我的html代码：

<div ng-app="MyApp" ng-controller="MyController">
        <div class="form-group" ng-show = "IsVisible">
            <label class="form-label" for="field-6">{{"NOTES_INSPECTOR"| translate}}</label>
            <span class="desc"></span>
            <div class="controls">
                <textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
            </div>
        </div> 
       <div class="form-group" ng-show = "IsVisible">
             <label class="form-label" for="manager">{{"PREPAYMENT"| translate}}</label>
            <span class="input-group-addon">&euro;</span>
            <input type="text" class="form-control" ng-model="avans">
            <span class="input-group-addon">.00</span>
        </div>
        <div class="form-group" ng-show = "IsVisible">
            <label class="form-label" for="manager">{{"THE_FINAL_PRICE"| translate}}</label>
            <span class="input-group-addon">&euro;</span>
            <input type="text" class="form-control" ng-model="finalPrice">
            <span class="input-group-addon">.00</span>
        </div>

        <div class="form-group">
            {{"ORDER_IS_USER_ORDER"| translate}}
            <label class="iswitch iswitch-md bg-info">
                <input type="checkbox" ng-model="IsVisible">
                <i></i>
            </label> {{"ALLOWED"| translate}}
         </div>
    </div>

这个html代码背后的想法是，每当用户按下代码中的第4div按钮时，元素就会出现，否则就会被隐藏。不幸的是它不起作用了。知道为什么吗？

Answer 1

演示

​

var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
  $scope.IsVisible = false;
  $scope.ShowHide = function () {
  //If DIV is visible it will be hidden and vice versa.
   $scope.IsVisible = $scope.IsVisible ? false : true;
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
        <div class="form-group" ng-show = "IsVisible">
            <label class="form-label" for="field-6">{{"NOTES_INSPECTOR"}}</label>
            <span class="desc"></span>
            <div class="controls">
                <textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
            </div>
        </div> 
       <div class="form-group" ng-show = "IsVisible">
             <label class="form-label" for="manager">{{"PREPAYMENT"}}</label>
            <span class="input-group-addon">&euro;</span>
            <input type="text" class="form-control" ng-model="avans">
            <span class="input-group-addon">.00</span>
        </div>
        <div class="form-group" ng-show = "IsVisible">
            <label class="form-label" for="manager">{{"THE_FINAL_PRICE"}}</label>
            <span class="input-group-addon">&euro;</span>
            <input type="text" class="form-control" ng-model="finalPrice">
            <span class="input-group-addon">.00</span>
        </div>

        <div class="form-group">
            {{"ORDER_IS_USER_ORDER"}}
            <label class="iswitch iswitch-md bg-info">
                <input type="checkbox" ng-model="IsVisible">
                <i></i>
            </label> {{"ALLOWED"}}
         </div>
    </div>

​