Dynamisch ausblenden div von AngularJS generiert

Mit diesem Code versuche ich ausblenden dynamisch erzeugte divs anzeigen. Jedes div sollte eine entsprechende Schaltfläche anzeigen, die das entsprechende div anzeigt/versteckt. Wenn ich den Code ng-show="isShown{{course.Id}}" entferne, dann wird das div korrekt angezeigt, so dass ich die ID innerhalb von ng-show nicht richtig kombiniere?Dynamisch ausblenden div von AngularJS generiert

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>

Quelle

2017-08-18 blue-sky

Sie machen dies schwieriger, als es sein muss. Verweisen Sie einfach auf die 'isShow1'-Eigenschaft jedes Elements. d.h. ng-show = "course.isShown1". – Claies

Wenn ich Sie recht verstehe, kann man es so machen:

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

Quelle

2017-08-18 21:30:58 Daniil

@Claies auch richtig. Aber nur wenn akzeptabel, Daten mit Geschäftsdaten mischen. – Daniil

Ihr Code wird nicht angezeigt/ausgeblendet, wie es ist - klicken S/H zeigt nicht und versteckt das entsprechende div? Die Funktion showHide muss aktualisiert werden? –

@ blue-sky, ich habe den Code aktualisiert, um Arbeit anzuzeigen/auszublenden. Keine Änderungen mehr nötig. Sie können die S/H-Taste vom Verbergen-Block zum Verlassen der Taste bewegen, wenn der Kurs ausgeblendet ist. – Daniil

In Ihrer Funktion Sie können den Wertumschaltenund Sie können auch den Text der Schaltfläche ändern (Einblenden/Ausblenden). Sie müssen den Knopf auch außerhalb des Bereichs von ng-show halten. Andernfalls wird die Schaltfläche ebenfalls ausgeblendet.

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>

Quelle

2017-08-19 07:49:26 Vivz

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

Quelle

2017-08-19 08:05:06

Dynamisch ausblenden div von AngularJS generiert

Antwort

Verwandte Themen