如何在嵌套对象上使用一个 ng-repeat 来填充表单中的多个标签和选项

Question

解释：

我想使用 one ng-repeat 指令，该指令遍历名为 $scope.templates 的嵌套 JavaScript 对象来创建和填充表单的标签和字段。

---

当前代码使用多个 ng-repeats 和硬编码标签，以获得预期结果：

JSbin Link

JS：

  angular.module('myApp', [])
        .controller('MainCtrl', function($scope) {

          $scope.templates = {
            pages: ['home', 'about'],
            posts: ['blog', 'lab']

          };

     });

我想使用pages: 和posts: 作为标签 和数组[] 作为<options> 到选择菜单

HTML：

  <div class="container" ng-controller="MainCtrl">
      <h3>Templates:<small>choose a template</small></h3>
    <form action="" class="col-lg-12" >

    <div>
          <label for="templates">Pages</label>
          <select class="form-control" >

            <option ng-repeat="template in templates.pages" value = "{{ template }}"> {{ template }}</option>
          </select>

    </div>
    <div>
          <label for="posts">Posts</label>

          <select class="form-control" >
            <option ng-repeat="template in templates.posts" value = "{{ template }}"> {{ template }}</option>
          </select> 

    </div>
    </form>

  </div>

这是JSbin

Answer 1

HTML

<div ng-app='currentApp'>
    <div ng-controller='ACtrl'>
        <form-control templates='templates'></form-control>
    </div>
</div>

指令

var currentApp = angular.module('currentApp', []);
currentApp.directive('formControl', ['$compile', function ($compile) {

    return {
        restrict: 'EA',
        scope: {
            templates: '='
        },
        template: '<div ng-repeat="(key, prop) in templates">' +
        '<label for="templates">{{key}}</label>' +
                      '<select class="form-control">' +
                        '<option ng-repeat="template in templates[key]" value = "{{template}}">' +
                            '{{template}}' +
                        '</option>' +
                      '</select>' +
                    '</div>',
        link: function(scope, element, attrs) {}
    }
}]);

控制器

currentApp.controller('ACtrl', function($scope){

          $scope.templates = {
            pages: ['home', 'about'],
            posts: ['blog', 'lab']
          };
});

JSFIDDLE