Question

美好的一天！

所以我尝试制作单页应用程序，但我仍然试图使用复选框隐藏/显示div元素。由于我不确定如何制作模块，隐藏/显示元素，我使用谷歌搜索一些教程，并找到了这段代码：

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代码背后的想法是，每当用户按下代码中第4个div的按钮时，元素应该出现，否则，隐藏。不幸的是它不起作用。有什么想法吗？

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>

使用ng-show / ng-hide隐藏多个<div>元素（AngularJS）

美好的一天！

1 个答案: