此Html代码有助于在卡片块中重复出公司配置文件。Modal显示角度ng-repeat数组中的第一个元素
<div class="container-fluid" id="gallery" ng-controller="ComController" style="padding-top: 2em;">
<h1 class="display-4 text-center" style="margin-bottom: 1em;">Campus Recruiters</h1>
<div class="row">
<div class="col-4" ng-repeat="company in companies">
<div class="card" style="margin-bottom: 2em;">
<img class="card-img-top img-fluid" ng-src="{{company.com_logo}}" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">{{company.com_name}}</h5>
<p class="card-text">{{company.com_abt}}</p>
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg" ng-click="setSelectedItem(company)">About {{company.com_name}}</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg" ng-model="selectedItem == company"> //Button to actiavte modal
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{company.com_name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我使用的ComController。 现在我不知道为什么只有第一个元素显示wheni点击按钮模态。
app.controller('ComController', ['$scope', function($scope){
$scope.setSelectedItem = function(item) {
$scope.selectedItem = item;
};
$scope.companies = [
{
com_logo: 'recruit_icons/tcs_logo.png',
com_name: 'Tata Consultancy Services',
com_abt: 'I am this company',
},
{
com_logo: 'recruit_icons/hcl_logo.png',
com_name: 'Hindustan Computers Limited',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/hp_logo.png',
com_name: 'Hewlett Packard',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/ion_logo.png',
com_name: 'Ion Trading',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/niit_logo.png',
com_name: 'NIIT Technologies',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/techm_logo.png',
com_name: 'Tech Mahindra',
com_abt: 'I am this company',
},
{
com_logo: 'recruit_icons/tcs_logo.png',
com_name: 'Tata Consultancy Services',
com_abt: 'I am this company',
},
{
com_logo: 'recruit_icons/hcl_logo.png',
com_name: 'Hindustan Computers Limited',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/hp_logo.png',
com_name: 'Hewlett Packard',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/ion_logo.png',
com_name: 'Ion Trading',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/niit_logo.png',
com_name: 'NIIT Technologies',
com_abt: 'I am this company',
},{
com_logo: 'recruit_icons/techm_logo.png',
com_name: 'Tech Mahindra',
com_abt: 'I am this company',
}];
}]);
我在您的HTML – tanmay
中看不到任何“ng-repeat”我认为应该更改ng-click来传递公司名称或任何唯一的弹出相应公司的名称,而不是传递公司对象本身 – CrazyMac
@tanmay它在按钮的标签中是正确的。 – Pulkit