Question

我有一个包含许多字段集的复杂表单，我想要一个select元素，它将所选字段集移动到顶部on-change。我是棱角分明的新手，我在试图想出这个角度时遇到了麻烦！

我有我的字段集，我正在编写我的'切换器'指令并在初始化时用字段集的图例填充它，并让控制台记录所选元素的标题，但我需要实际元素所以我可以将它移动到DOM中列表的顶部。如何将select选项的值与另一个html元素相关联？或者是否有更好的方法解决这个问题？

我的表格：

<form>
  <switcher></switcher>
  <div class="switchable" ng-include="app/controls/outline"></div>
  <div class="switchable" ng-include="app/controls/labelling"></div>
  <div class="switchable" ng-include="app/controls/formatting"></div>
  <!--... etc...-->
</form>

一个例子包括：

<fieldset>
  <legend>Outline</legend>
  <!--some form elements-->
</fieldset>

Switcher html：

<select ng-change="changeSwitch()" ng-model="selectedMenu"></select>

Switcher指令：

angular.module('myApp')
  .directive('switcher', function ($timeout) {

    return {
      templateUrl: 'app/directives/switcher/switcher.html',
      restrict: 'EA',
      replace: 'true',
      link: function (scope, element, attrs) {
        var setOptions = function() {
          $('.switchable').each(function(i, ele){
            $(element).append('<option>'+$(ele).find('legend').text()+'</option>');
          });
        }
        $timeout(setOptions, 0);

        scope.changeSwitch = function() {
          console.log(scope.selectedMenu);
        }
      }
    };
  });

这会在更改时在控制台中打印图例，但我希望它将相应的div移动到顶部

Answer 1

如果您想控制fieldset元素，请将它们作为切换器元素的子项。

`<switcher>
     <fieldset switcher-option="Outline">
         <legend>Outline</legend>
         <!--some form elements-->
     </fieldset>
</switcher>`

接下来将自定义指令添加到每个字段集，通过要求和使用它的控制器将其自身记录到切换器指令。指令不应该使用他们不拥有的元素，因为它更难理解变更来自哪个地方。这是plnkr的链接，我在其中对您的代码进行了一些修改，并添加了大量注释，以帮助您理解更改，因为您已经说过您是角色的新手。

在Angular中引用具有表单值的元素

1 个答案: