2016-08-17 10 views
-2

ng-repeatリストの行を選択して強調表示するのと同じボタンを使用して、選択した行の選択を解除するにはどうすればよいですか?どのような異なるオプションがありますか、見つけられないような例やリンクは誰にもありますか?ng-repeatで選択した行の選択を解除します。

EDIT: - :

HTML

<head> 
<meta charset="utf-8" /> 
<title>AngularJS Plunker</title> 
<script>document.write('<base href="' + document.location + '" />');</script> 
<link rel="stylesheet" href="style.css" /> 
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
<script src="app.js"></script> 
</head> 

<body ng-controller="MainCtrl"> 
<div ng-repeat="item in items" ng-class="{sel: item.Item == selected}"> 
    <label>Item No. {{item.Item}}</lablel> | 
    <label>{{item.Description}}</label> | 
    <button ng-click="onClick(item.Item);" class="btn btn-primary"> 
    {{item.Item == selected ? 'Hide' : 'Show'}} 
    </button> 
    </div> 
    <br /> 
    <br /> 
    <div ng-switch="moduleState"> 
      <div ng-switch-when="details"> 
       These are your details:- 
       Item {{selected}} is selected 
       </div> 
</body> 
</html> 

をapp.js - は https://plnkr.co/edit/LYrmpLUwGaWx8wLeCOoT

コードはここにあるリンクを使用してPlunkerを参照してください。

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
$scope.items = [ 
    { 
     Item: 1, 
     Description: 'This is item 1' 
    }, 
    { 
     Item: 2, 
     Description: 'This is item 2' 
    }, 
    { 
     Item: 3, 
     Description: 'This is item 3' 
    } 
]; 

$scope.onClick = function (item) { 
    $scope.selected = item; 
    $scope.moduleState = 'details'; 
}; 
}); 

ボタンの1つが選択されたら、もう一度選択を解除するにはどうすればよいですか?

<div ng-repeat="item in items" ng-class="{sel: item.Item == selected}"> 
    <label>Item No. {{item.Item}}</lablel> | 
    <label>{{item.Description}}</label> | 
    <button ng-click="onClick(item.Item);" class="btn btn-primary"> 
    {{item.Item == selected ? 'Hide' : 'Show'}} 
    </button> 
</div> 

<br /> 
<br /> 

<div ng-if="selected"> 
    These are your details:- 
    Item {{ selected }} is selected 
</div> 
+1

「行を選択してください」とはどういう意味ですか?フィドル、または少なくともあなたのhtmlを共有してください。 – Kraken

+0

@Krakenちょうど更新された質問 – user1319501

+1

それはまだ非常に不明です。最初のスニペットが2番目のスニペットにリンクされていることはわかりません。 1つはトグルと不思議なshow()関数を使用します。もう一方はmoduleStateを使用します。問題を再現した完全で最小限の例を投稿してください。 –

答えて

1
$scope.onClick = function(item) { 
    if ($scope.selected === item) { 
    $scope.selected = null; 
    } 
    else { 
    $scope.selected = item; 
    } 
}; 

とビューでは、基本的に私がやったことである:、その目に見えるが、それを隠す場合は、ときに、第2のクリックで

  • 見えるにそのセットフラグをトグル
  • 行ごとに「のisVisibleを」フラグを追加しました

  • 1

    チェック以下plunkr:

    https://plnkr.co/edit/u7I9nIRZgOMB7vqBr92n?p=preview

    var app = angular.module('plunker', []); 
     
    
     
    app.controller('MainCtrl', function($scope) { 
     
        $scope.items = [ 
     
         { 
     
          Item: 1, 
     
          isVisible: false, 
     
          Description: 'This is item 1' 
     
         }, 
     
         { 
     
          Item: 2, 
     
          isVisible: false, 
     
          Description: 'This is item 2' 
     
         }, 
     
         { 
     
          Item: 3, 
     
          isVisible: false, 
     
          Description: 'This is item 3' 
     
         } 
     
        ]; 
     
        
     
        $scope.onClick = function (item) { 
     
         if(!item.isVisible) { 
     
         item.isVisible = !item.isVisible; 
     
         $scope.selected = item.Item; 
     
         $scope.moduleState = 'details'; 
     
         } else { 
     
         item.isVisible = !item.isVisible; 
     
         $scope.selected = $scope.moduleState = ""; 
     
         } 
     
        }; 
     
    });
    <button ng-click="onClick(item);" class="btn btn-primary"> 
     
         {{item.Item == selected ? 'Hide' : 'Show'}} 
     
         </button>

    関連する問題