动态隐藏 AngularJS 生成的 div答案

【问题标题】：Dynamically hiding div generated by AngularJS动态隐藏 AngularJS 生成的 div
【发布时间】：2018-01-27 14:52:45
【问题描述】：

使用此代码，我试图显示隐藏动态生成的 div。每个 div 应显示一个相应的按钮，该按钮将显示/隐藏相应的 div。如果我删除代码ng-show="isShown{{course.Id}}"，那么 div 会正确显示，所以我没有正确组合 ng-show 中的 id 吗？

plnkr：http://plnkr.co/edit/JbVz231UuPLVGbIFuiwJ?p=preview

源代码：

<!DOCTYPE html>
<html ng-app>

<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
    <script>
        function myCtrl($scope, $window) {
            $scope.showHide = function(toShowOrHide) {
                console.log('showhide : ' + JSON.stringify(toShowOrHide))
            }
            $scope.vm = {};
            $scope.vm.Courses = [{
                Id: 1,
                Name: "Course 1",
                isShown1: true
            }, {
                Id: 2,
                Name: "Course 2",
                isShown1: true
            }];
            $scope.isShown1 = true
            $scope.isShown2 = true
        }
    </script>
</head>

<body ng-controller="myCtrl">
    <div>
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-show="isShown{{course.Id}}" id={{course}}>
                    <label>{{course.Name}}</label>
                    <button ng-click="showHide(course)"> S/H </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

【问题讨论】：

你让这变得比它需要的更困难。只需引用每个元素的 isShown1 属性即可。即ng-show="course.isShown1".

标签： angularjs

【解决方案1】：

如果我理解你的话，你可以这样：

<!DOCTYPE html>
<html  ng-app>
<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

    <script >
        function myCtrl($scope,  $window) {

            var isCourseShown = {};

            $scope.isShown = function (cource) {
              var isShown = isCourseShown[cource.Id];
              if(isShown == null) {
                isCourseShown[cource.Id] = true;
                isShown = true;
              }
              return isShown;
            };
            $scope.showHide =  function(cource){
              var isShown = isCourseShown[cource.Id];
              isCourseShown[cource.Id] = !isShown;
            };

            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1"},
              { Id: 2, Name: "Course 2"}
            ];
        } 



    </script>
</head>
<body ng-controller="myCtrl">
    <div>  
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-show="isShown(course)" id={{course}}>
                    <label>{{course.Name}}</label>
                    <button ng-click="showHide(course)">
                      S/H
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

plnkr：http://plnkr.co/edit/ue8n2u7fRoBKZoCMruXA?p=preview

【讨论】：

@Claies 也是。但前提是可接受的混合视图数据与业务数据。
您的代码没有按原样显示/隐藏 - 单击 S/H 不会显示和隐藏相应的 div 吗？ showHide 功能需要更新？
@blue-sky，我已更新代码以显示/隐藏工作。无需更多更改。您可以将 S/H 按钮从隐藏块中移动，以在课程隐藏时使按钮可见。

【解决方案2】：

在您的函数调用中，您可以切换isShown1 的值，也可以更改按钮的文本（显示/隐藏）。您还必须将按钮保留在ng-show 的范围之外。否则，按钮也会被隐藏。

 var app = angular.module("app", []);
 app.controller("myCtrl", function($scope, $window) {
     $scope.showHide = function(course) {
         course.isShown1 = !course.isShown1;
         course.text = course.isShown1 ? 'Hide' : 'Show';
     }
     $scope.vm = {};
     $scope.vm.Courses = [{
         Id: 1,
         Name: "Course 1",
         isShown1: true,
         text: "Hide"
     }, {
         Id: 2,
         Name: "Course 2",
         isShown1: true,
         text: "Hide"
     }];
 });

<!DOCTYPE html>
<html ng-app="app">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <div>
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-show="course.isShown1" id={{course.Id}}>
                    <label>{{course.Name}}</label>
                </div>
                <button type="button" ng-click="showHide(course)">{{course.text}}</button>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

<DOCTYPE html>
<html>
<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

    <script >
        function myCtrl($scope,  $window) {

            $scope.showHide =  function(course){
                  course.isShow = !course.isShow;


            }

            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1", isShow: true},
              { Id: 2, Name: "Course 2", isShow: true}
              ];
        } 



    </script>
</head>
<body ng-controller="myCtrl">
    <div>  
        <div ng-repeat="course in vm.Courses" >
            <div>
                <div>
                    <label  ng-show="course.isShow">{{course.Name}}</label>
                    <button ng-click="showHide(course)">S/H</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

【讨论】：