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>
「行を選択してください」とはどういう意味ですか?フィドル、または少なくともあなたのhtmlを共有してください。 – Kraken
@Krakenちょうど更新された質問 – user1319501
それはまだ非常に不明です。最初のスニペットが2番目のスニペットにリンクされていることはわかりません。 1つはトグルと不思議なshow()関数を使用します。もう一方はmoduleStateを使用します。問題を再現した完全で最小限の例を投稿してください。 –