0

Explanation:

I would like to use one ng-repeat directive, that goes over a nested JavaScript object called $scope.templates to create and populate a form's labels and fields.

Current code uses multiple ng-repeats and hardcoded labels, to get expected results:

JSbin Link

JS:

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

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

          };

     });

I would like to use pages: and posts: as the labels and the array[] as the <options> to the select menu

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>

Here's the JSbin

Armeen Moon
  • 18,061
  • 35
  • 120
  • 233

1 Answers1

1

HTML

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

DIRECTIVE

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) {}
    }
}]);

CONTROLLER

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

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

JSFIDDLE

dcodesmith
  • 9,590
  • 4
  • 36
  • 40
  • Is there a short answer to When must you use $compile? – Armeen Moon Jan 09 '14 at 20:43
  • Answered question: http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function-in-angularjs – Armeen Moon Jan 09 '14 at 20:48
  • I was away. Glad you found a solution :) – dcodesmith Jan 09 '14 at 21:00
  • Hey dcodesmith do you think you could explain why the the compile function is written with an array around it? I'm having trouble finding out how and why this works. I really dont want to ask a question like this again. why wont this work with $scope syntax like `currentApp.directive('formControl', function ($compile) {});` – Armeen Moon Jan 09 '14 at 23:26
  • If you cant tell I'm taking a top down approach to learning Angular (a bit over my head) – Armeen Moon Jan 09 '14 at 23:27
  • 1
    Oh! It's not a problem, you can use it the way you have it. But say you wanted to rename your `$compile` once you inject it, then you could have it like that. So you'll have $compile and then in the functions parameters use `compile` or whatever other variable name you want to give it – dcodesmith Jan 09 '14 at 23:29
  • Interesting. It sounds more modular; however, I cant think/know the usecase or even how to execute this 'renameing' of the $compile. Now you got me curious --I want to know, lol? I can open up a new question? Or do you have any readings, I should look at first? – Armeen Moon Jan 09 '14 at 23:35
  • I found the answer on naming... https://www.youtube.com/watch?v=NnB2NBtoeAY within this video – Armeen Moon Feb 02 '14 at 18:59