2

私はこれにしばらく取り組んできましたが、なぜうまくいかないのかわかりません。これは私が作成しようとしている効果です - http://plnkr.co/edit/RAeIwFbn2Zoe9WfLdMX8?p=preview。クリックすると別の情報が表示されるタブ バーを作成したいと考えています。

これは私がこれまでに持っているコードですが、何らかの理由で機能しません:

HTML 

<ul class="nav nav-pills">
 <li ng-repeat="tablet in Packages.panelTabs">
    <a href ng-click="tab = tablet.tabNum"> 
      {{tablet.name}}
    </a>
 </li>
    <p ng-show="tab === 1"> Tab1 content </p>           
    <p ng-show="tab === 2"> Tab2 content</p> 
 </ul>

JS

私のAngularコードは次のようになります。

this.panelTabs = [

            {
                name: "package-price",
                tabNum: 1
            },
            {
                name: "package-description",
                tabNum: 2
            }
        ];

私はさまざまな回答を読み、多くのことを試しましたが、それは何かばかげているに違いないと感じています。どんな助けでも大歓迎です。

ありがとう、ポール

4

1 に答える 1

3

モデルを設定するときは、キーワードtabを使用して親スコープで宣言してください。$parent各反復ng-repeatディレクティブの理由により、プロトタイプとして継承された新しいスコープが作成されます。

マークアップ

<li ng-repeat="tablet in Packages.panelTabs">
   <a href ng-click="$parent.tab = tablet.tabNum"> 
      {{tablet.name}}
   </a>
</li>

@aziumは、コントローラーのエイリアスとしてcontrollerAs使用して既に使用しているため、使用することをお勧めします。Packages次のように、コントローラー変数内にタブ変数を配置しますPackages.tab

マークアップ

<li ng-repeat="tablet in Packages.panelTabs">
   <a href ng-click="Packages.tab = tablet.tabNum"> 
      {{tablet.name}}
   </a>
</li>
<p ng-show="Packages.tab === 1"> Tab1 content </p>           
<p ng-show="Packages.tab === 2"> Tab2 content</p>
于 2015-09-06T18:07:15.840 に答える