引用表单值在 Angular 中的元素

Question

我有一个包含许多字段集的复杂表单，我想要一个 select 元素，它将 selected 字段集移动到顶部 on-change。我是 angular 的新手，我很难 angularly 去想这个！

我有我的字段集，我正在编写我的 'switcher' 指令并在初始化时用字段集的图例填充它，并让它在控制台记录 selected 的标题元素，但我需要实际元素，以便我可以将它移到 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>`

接下来将自定义指令添加到每个字段集，通过要求和使用它的控制器将自己记录到切换器指令。指令不应该与它们不拥有的元素一起玩，因为它更难理解变化来自哪里。这是 link 到 plnkr，我对您的代码做了一些修改，还添加了很多注释以帮助您理解更改，因为您说您是 angular 的新手。

引用表单值在 Angular 中的元素

Reference an element with a form value in Angular

javascript

web-applications

angularjs

angularjs-directive