このHtmlコードは、会社のプロフィールをカードブロック内で繰り返すのに役立ちます。モーダルは角度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です。 今モーダルのボタンをクリックしたときに最初の要素だけが表示されている理由を理解できません。
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に 'ng-repeat'が表示されません – tanmay
あなたのng-clickを変更して会社名を渡すか、会社のオブジェクト自体を渡す代わりに対応する会社をポップアップするように変更する必要があります – CrazyMac
@tanmayそれはボタンのタグの中にあります。 – Pulkit