1

问题：

我有一个来自基础的垂直选项卡系统，在第一个选项卡的相应容器中，有两个主要组件：一个对象列表和一个按钮，单击该按钮时，应显示一个表单以在同一容器中创建另一个这些对象无需重新加载页面。一旦表单被提交，原始内容带有对象列表（现在包括新添加的对象），以及创建新对象的那个按钮。

我正在使用 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 是 Foundation 使用的 javascript 框架，我在这里寻找的内容会更好地用 JQuery 甚至像 Zepto.js 这样的更轻的版本来实现吗？有人可以帮我指出正确的方向吗？

更新：

这是我最终使用的 jQuery：

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

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

4

1 回答 1

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>
于 2013-03-12T07:54:42.330 回答