Question

问题：

我有一个来自粉底的垂直标签系统，在第一个标签的相应容器中，有两个主要组件：一个对象列表和一个按钮，当点击它时，它应该显示一个表单来创建另一个这样的对象相同的容器，无需重新加载页面。提交表单后，原始内容包含对象列表（现在包括新添加的对象），以及用于创建新对象的按钮。

我正在使用Foundation 3的垂直标签，并且有类似的内容：

<div class="four columns">
  <dl class="vertical tabs">
    <dd id="firstTab" class="active"><a href="#1">1</a></dd>
    <dd id="secondTab><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li class="active" id="1Tab">
      <a id="formButton" class="large success button radius">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab">form goes here</li>
  </ul>
</div>

我以前试图让它与AngularJS一起使用。但是，有人向我建议，如果我坚持使用纯粹的DOM操作，那么AngularJS并不是真正需要的，现在我对它的原因有了更好的理解。考虑到Zepto是基金会使用的javascript框架，我在这里寻找的是更好地用JQuery甚至更轻的版本如Zepto.js实现的吗？有人可以帮我指出正确的方向吗？

更新

这是我最终使用的jQuery：

$(document).ready(function () {
    $("firstTab").removeClass("active");
    $("1Tab").removeClass("active");
    $("formTab").addClass("active");
})

到目前为止，这个解决方案的问题是我只能提出一次表格。这允许我改变主意填写表单并单击另一个选项卡。但是，如果我在此之后再次尝试单击表单按钮，则表单不再出现。开发人员窗口指示仍在添加和删除“活动”类。但我认为问题是这个表单用于的对象是一个Class.new（）对象，我使用嵌入式ruby语句在DOM中的表单之前创建。有没有办法让每个按钮单击时发生这个Class.new（）实例化，而不是仅在整个页面被加载时？

Answer 1

不确定您要在此处实现的目标，但您可以使用ng-show属性显示/隐藏元素。以下是如何使用它的示例：

<div class="four columns">
  <dl class="vertical tabs">
    <dd class="active"><a href="#1">1</a></dd>
    <dd><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li class="active" id="1Tab">
      <a id="formButton" class="large success button radius" ng-click="showForm()">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab"><form ng-show="isVisible"><input type="text" value="Hi! I'm visible!"/></form></li>
  </ul>
</div>

现在您在控制器中管理isVisible属性：

var myApp = angular.module('myApp', []);
myApp.controller("FormCtrl", function ($scope) {
    //set it to false initially
    $scope.isVisible = false;
    $scope.showForm = function () {
        //change to visible after click
        $scope.isVisible = true;
    }
});

如果要根据属性添加类，可以使用ng-class：

<div class="four columns">
  <dl class="vertical tabs">
    <dd class="active"><a href="#1">1</a></dd>
    <dd><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li ng-class="{selected: tag.isSelected}" id="1Tab">
      <a id="formButton" class="large success button radius" ng-click="showForm()">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab"><form ><input type="text" value="Hi! I'm visible!"/></form></li>
  </ul>
</div>

如何使用JQuery为每个选项卡提供多个可能的视图？

问题：

更新

1 个答案: