使用 ng-show/ng-hide (AngularJS) 隐藏多个 <div> 元素答案

【问题标题】：Hiding multiple <div> elements using ng-show/ng-hide (AngularJS)使用 ng-show/ng-hide (AngularJS) 隐藏多个 <div> 元素
【发布时间】：2017-01-27 12:08:31
【问题描述】：

美好的一天！

所以我尝试制作单页应用程序，但我一直在尝试使用复选框隐藏/显示 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 的按钮时，元素应该出现，否则隐藏。不幸的是，它不起作用。任何想法为什么？

【问题讨论】：

您似乎从未与 $scope 变量 showHide 交谈过。我认为你需要把你的复选框和那个挂钩。否则，isVisible 将始终为假，我猜这就是正在发生的事情。
你能解释一下如何“挂钩”showHide 到复选框吗？ TY

标签： angularjs

【解决方案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>

【讨论】：