Question

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

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

src：

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

Answer 1

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

override func viewDidLoad() {
    super.viewDidLoad()
    tabBar.delegate = self
}

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

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

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

动态隐藏AngularJS生成的div

3 个答案: