Question

我有这个HTML

  <div class="pageContent">
    <aside class="left-cont">
      <ul class="btn-menu" >
        <li ng-repeat="tab in tabs" ><a  class="ng-scope ng-binding" href="#" ng-click="show={{tab.id}}">   {{tab.name}}</a> </li> 
      </ul>
    </aside>
    <section class="main-content" ng-show="show === 1">
      <h1> {tab.title}}</h1>
      <p>{{tab.content}}</p>
    </section>
    <section class="main-content" ng-show="show === 2">
      <h1> {{tab.title}}</h1>
      <p>{{tab.content}}</p>
    </section>
    <section class="main-content" ng-show="show === 3">
      <h1> {{tab.title}}</h1>
      <p>{{tab.content}}</p>
    </section>
  </div>

我有三个问题：

1）ng-click="show={{tab.id}}"向我显示dom中正确的ID号，例如，id = 1确实显示<a class="ng-scope ng-binding" href="#" ng-click="show=1">但我的控制台出现错误 - Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=%7B&p1=invalid%20key&p2=7&p3=show%3D%7B%7Btab.id%7D%7D&p4=%7Btab.id%7D%7D为什么那？我曾尝试编写tab.id而不是{{tab.id}}，但它甚至无法获取元素。

2）我希望只要点击a就会附加section标签，但我不能这样做，因为section标签没有包含在li标签中（当我把它们放入时）在他们开火，但这不是我想要的）。如何绑定这两个不同的元素？

3）我希望每个部分都附加其特定选项卡的内容，该部分包含 - ng-show="show === 1"我想要tab.title和tab = content的tab.content，其中id = 1，依此类推..

这一切怎么可能？

这里非常感谢帮助

Answer 1

@HarishR是对的：这不是AngularJS做事的方式。执行操作的必要方法是在选项卡实例上使用ng-click将isActive属性设置为true。然后该指令将观察isActive属性并相应地更改类。

由于您可能不想重新发明轮子，您可以考虑使用Angular带（http://mgcrea.github.io/angular-strap/#/tabs#tabs）或查看此代码https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js。

在Angular中绑定不同的dom元素

1 个答案: