2013-03-08 38 views
0

我正在使用UI Boostrap(http://angular-ui.github.com/bootstrap)和AngularJS和Jade。我無法得知在加載該部分時可以選擇動態生成的集合中的第一個選項卡。這是我的代碼:從UI中的動態加載標籤激活第一個引導

div#attachments-section 
    tabs 
     pane(ng-repeat='attach in attachments', heading='{{attach.filename}}', active='attach.active') 
     div.content 
      object(width='100%', height='100%', data='{{"http://localhost/files/" + attach.content}}') 

這意味着,在裝載部(#附件截面)時,無標籤被選中。我嘗試爲JSON集合的第一個元素(附件)中的活動屬性分配一個真值,但它不起作用。

檢查:我更新了我的代碼(帶有對象標籤),因爲我需要使用PDF的瀏覽器查看器顯示每個附件。

更新我跟着@blesh的建議,我可以認識到,它在Firefox中運行良好,但在Chrome中卻不行。我在Punkler寫了一個樣本。

http://plnkr.co/edit/ESBWciLAKJosK2u6eZVD?p=preview

你對此有什麼可能發生的任何想法?

+2

建立一個蹲點。 – Stewie 2013-03-08 16:35:42

+2

您需要做的就是在加載後將第一個附件設置爲活動狀態。 '$ scope.attachments [0] .active = true;' – 2013-03-08 18:06:22

+0

@blesh您的解決方案可以工作,但只能在Firefox中使用。我會尋找另一種解決方案,使其在Chrome中也能正常工作。 – 2013-03-08 19:29:07

回答

0

我找到了! 在Chrome中,您必須在對象標籤中指定嵌入內容的類型。

<div ng-controller="MainCtrl"> 
    <div><h2>Example</h2></div> 
    <div id="attachments-section"> 
     <tabs> 
      <pane ng-repeat="attachment in attachments" heading="{{attachment.title}}" active="attachment.active"> 
      <div style="height: {{objHeight}}; overflow-y: hidden;"> 
       <object type='application/pdf' width='100%', height='100%', data='{{attachment.filename}}'></object> 
      </div> 
      </pane> 
     </tabs> 
    </div> 
</div> 

下面這段代碼在punkler工作在任何瀏覽器:http://plnkr.co/edit/ESBWciLAKJosK2u6eZVD

感謝您的幫助。