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

Question

我有一個包含許多字段集的復雜表單，並且我想要一個select元素，它將選擇的字段集移動到頂部。 我是新手，在嘗試角度思考時遇到了麻煩！

我有我的字段集，正在編寫我的“ switcher”指令，並在初始化時用字段集的圖例填充它，並讓它控制台記錄所選元素的標題，但是我需要實際的元素，以便我可以將其移至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元素的子元素。

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

接下來，將自定義指令添加到每個需要通過使用其控制器將其自身記錄到切換程序指令的字段集中。 指令不應該使用它們不擁有的元素，因為它會使您更難理解更改來自何處。 這是plnkr的鏈接，在該鏈接中，我對您的代碼進行了一些修改，並且還添加了許多注釋，以幫助您理解所做的更改，因為您已經說過您不熟悉 angular。