<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Stylesheets -->
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<!-- Scripts -->
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.2.13" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script data-require="angular.js@1.2.13" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-controller="oneCtrl">
<div class="container">
<!-- First Row -->
<div class="row">
<div ng-repeat="image in images" class="col-sm-4 padding-bottom30 well">
<a href rollover ng-click="select(image, 1)">
<img class="img-responsive padding-top30" ng-src='{{image.img}}' />
</a>
</div>
</div>
<!-- First Row Selected Contents -->
<div ng-show="selected1">
<div class="row">
<div class="col-sm-4 padding-top30">
<h3 class="mont margin-top0">{{selected1.name}}</h3>
<p><b>Mission Statement</b>
</p>
<p>{{selected1.info}}</p>
<a href={{selected1.site}}>
<button class="btn btn-colour-red pull-left">VISIT SITE</button>
</a>
</div>
<div class="span8 padding-top30">
<img class="img-responsive" ng-src='{{selected1.photo}}'/>
</div>
</div>
</div>
<!-- End of first row -->
<!-- Second Row -->
<div class="row">
<div ng-repeat="pics in images" class="col-sm-4 padding-bottom30 well">
<a href ng-click="select(pics, 2)">
<img class="img-responsive padding-top30" ng-src='{{pics.img}}' />
</a>
</div>
</div>
<!-- Second Row Selected Contents -->
<div ng-show="selected2">
<div class="row">
<div class="col-sm-4 padding-top30">
<h3 class="mont margin-top0">{{selected2.name}}</h3>
<p><b>Mission Statement</b>
</p>
<p>{{selected2.info}}</p>
<a href={{selected2.site}}>
<button class="btn btn-colour-red pull-left">VISIT SITE</button>
</a>
</div>
<div class="span8 padding-top30">
<img class="img-responsive" ng-src='{{selected2.photo}}' />
</div>
</div>
</div>
<!-- End of second row -->
</div>
</body>
</html>
// Code goes here
var app = angular.module('myApp', []);
app.controller('oneCtrl', function ($scope) {
var data = [
{
name: 'Company 1',
site: 'http://www.company1.org',
photo: '',
info: 'This company is wonderful'
},
{
name: 'Company 2',
site: 'http://www.company2.org',
photo: '',
info: 'This company is hiring now !'
}
];
$scope.images = [
{
id: 1,
img:'image1.svg'
},{
id: 2,
img:'image2.svg'
}
];
$scope.select = function(image, section) {
if(section === 1) {
$scope.selected1 = data[image.id - 1];
$scope.selected2 = null;
} else if (section === 2) {
$scope.selected1 = null;
$scope.selected2 = data[image.id - 1];
} else {
$scope.selected1 = null;
$scope.selected2 = null;
}
};
});
/* Styles go here */
#SO-23016868
ng-click on items in an ng-repeat to show and hide a certain div
I have used image1.svg and image2.svg, you can use your own.
- jay
<?xml version="1.0" ?><svg baseProfile="tiny" height="24px" id="Layer_1" version="1.2" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M18,11H6c-1.104,0-2,0.896-2,2s0.896,2,2,2h12c1.104,0,2-0.896,2-2S19.104,11,18,11z"/></svg>
<?xml version="1.0" ?><svg baseProfile="tiny" height="24px" id="Layer_1" version="1.2" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M18,10h-4V6c0-1.104-0.896-2-2-2s-2,0.896-2,2l0.071,4H6c-1.104,0-2,0.896-2,2s0.896,2,2,2l4.071-0.071L10,18 c0,1.104,0.896,2,2,2s2-0.896,2-2v-4.071L18,14c1.104,0,2-0.896,2-2S19.104,10,18,10z"/></svg>