<head>
<script>
var app = angular.module('myApp', []);
app.controller('sampleController', function($scope) {
$scope.items = [{
name: 'item1'
},
{
name: 'item2'
},
{
name: 'item3'
},
{
name: 'item4'
}
]
});
</script>
</head>
<body ng-app="myApp" ng-controller="sampleController">
<ul ng-repeat='item in items'>
<li>
<a href>Show {{item.name}}</a>
</li>
</ul>
<div class="faded overflowed">
<a>X Close</a>
<div class="card">
<h1>{{item.name}}</h1>
<p>{{sampletext1}}</p>
<p>{{sampletext2}}</p>
</div>
</div>
</body>
Попробовал поискать решение в интернете, но все что находил было немного для других случаев.
Набросал код в упрощенной форме.
Нужно что бы при нажатии на item
из item in items
, .faded.overflowed
(изначально hidden) получал класс(который помимо всего будет его делать visible) и находящиеся внутри .card
item.name sampletext1 sampletext2
получали соответствующие значения из array. А при нажатии на зону вне .card
весь .faded.overflowed
скрывался бы.
Только начал учить AngularJS и хотел бы узнать как подобное принято реализовывать на нем.