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

Question

我有一个包含许多字段集的复杂表单，并且我想要一个选择元素，它将在更改时将选定的字段集移动到顶部。我是 Angular 新手，在尝试从 Angular 思考这个问题时遇到困难!

我已经有了我的字段集，我正在编写“切换器”指令并在初始化时用字段集的图例填充它，并让它控制台记录所选元素的标题，但我需要实际的元素，所以我可以将它移动到 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>

切换器 html:

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

切换器指令:

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

如果您想控制字段集元素，请将它们设为切换器元素的子元素。

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

接下来将自定义指令添加到每个字段集，该字段集将通过要求和使用其 Controller 将自身记录到切换器指令。指令不应使用它们不拥有的元素，因为这样会更难理解更改来自何处。这是plnkr的链接我对您的代码做了一些修改，并添加了很多注释来帮助您理解这些更改，因为您已经说过您是 Angular 的新手。