2016-08-31 9 views
0

私はこの質問が以前に尋ねられたが、これを行う適切な方法を見つけることができないことを知っている。ブートストラップモーダルにデータを渡す際の角度のベストプラクティスは何ですか?角度を使用してブートストラップモーダルにデータを渡す

あなたがクリックできるカルーセルアイテムがあり、そのアイテムの対応するデータに従ってポップアップするはずのモーダルです。ここで

はコードです:

HTML:

<div id="winit-slider-1" class="winit-slider" ng-controller="winitCtrl"> 
    <div class="winit-item text-center" ng-repeat="winit in winits"> 
     <img src="{{winit.photo}}" class="width-100"> 
     <h4 class="text-red">{{winit.filled}}</h4> 
     <h3>{{winit.title}}</h3> 
     <a href="#" class="btn btn-block btn-md btn-winit margin-bot-10">Winit!</a> 
     <div class="social-icons"> 
      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
      <a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a> 
      <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
     </div> 
    </div> 
</div> 

app.js

var app = angular.module('winitApp', ["angularModalService"]); 
app.controller('winitCtrl', function($scope, ModalService) { 
    var winits = [ 
     { 
      id:1, 
      photo:"https://cdnb.lystit.com/photos/1678-2015/11/04/gucci-us-beigeblue-gg-supreme-childrens-gg-supreme-backpack-beige-product-4-168315478-normal.jpeg", 
      filled:"40% Full in 3 Days", 
      title:"Olivia-Burton Women Watch" 
     }, 
     { 
      id:2, 
      photo:"http://images.bigcartel.com/product_images/122941467/fin_pegleg_brd2.jpg?auto=format&fit=max&h=1000&w=1000", 
      filled:"80% Full in 2 Days", 
      title:"Super-Cool Fast Skateboard" 
     }, 
     { 
      id:3, 
      photo:"http://i01.i.aliimg.com/wsphoto/v0/581102529_1/New-Vintage-Fashion-Gear-Handmade-Genuine-Leather-Strap-Watches-Disc-Diamond-Women-s-Wristband-Watch-Free.jpg", 
      filled:"45% Full in 8 Days", 
      title:"Most-Expensive Watch Ever" 
     }, 
     { 
      id:4, 
      photo:"https://cdnb.lystit.com/photos/1678-2015/11/04/gucci-us-beigeblue-gg-supreme-childrens-gg-supreme-backpack-beige-product-4-168315478-normal.jpeg", 
      filled:"40% Full in 3 Days", 
      title:"Olivia-Burton Women Watch" 
     }, 
    ]; 

    $scope.winits = winits; 

    ModalService.showModal({ 

    }) 

}); 
+0

は、私はあなたがそれで構築されたモーダルを持っている角度のUIブートストラップを含むお勧めしますか?データは表示されず、リンクのみが表示され、モデルは表示されません。 –

+0

画像のURLとタイトルだけです。私はあなたがクリックする項目に応じてどのようにモーダルを動的にすることができるのだろうかと思っています。何か案は? – jake

+0

ブートストラップのみを使用していますか?他の角度成分はありませんか? –

答えて

0

私はあなたの質問に、このdoesntの答えを知っているが、アプリケーションに他のライブラリを追加することができた場合。あなたが合格しようとしているどのようなデータhttps://angular-ui.github.io/bootstrap/#/modal

関連する問題