AngularJSによって生成されたdivを動的に隠す

このコードを使用して、非表示に動的に生成されたdivを表示しようとしています。各divには対応するdivを表示/非表示にする対応するボタンが表示されます。コードng-show="isShown{{course.Id}}"を削除すると、divが正しく表示されるので、ng-show内のidを正しく組み合わせていないようです。AngularJSによって生成されたdivを動的に隠す

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>

出典

2017-08-18 blue-sky

あなたはそれが必要以上に、これはより困難にしています。各要素の 'isShown1'プロパティを参照するだけです。すなわち 'ng-show =" course.isShown1 "'となります。 – Claies

私は右のあなたを理解していれば、あなたがそのようにそれを行うことができます。

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

出典

2017-08-18 21:30:58 Daniil

@Claiesもそうです。しかし、ビジネスデータとのビューデータの混合が許容される場合に限ります。 – Daniil

あなたのコードはそのまま/非表示にはなりません - S/Hをクリックすると対応するdivが表示されず非表示になりますか？ showHide関数を更新する必要がありますか？ –

@ blue-sky、私は作業を表示/非表示にするコードを更新しました。これ以上の変更は必要ありません。 S/Hボタンを非表示ブロックから非表示にすることができます。 – Daniil

あなたの関数であなたはの値を切り替えることができますボタンのテキストを変更することもできます（表示/非表示）。また、ボタンを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>

出典

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>

出典

2017-08-19 08:05:06

AngularJSによって生成されたdivを動的に隠す

答えて

関連する問題