i have a list of templates and i would like to select one of them from a list and pass the id to an input inside a form. My laout looks like this

<form>
    <input type="hidden" name="template_id" ng-model="template.template_id" />
    <input type="text" name="template_name" ng-model="template.template_name" />
    <ul>
        <li id="1">Template1</li>
        <li id="2">Another Template</li>
    </ul>
    <button type="submit"></button>
</form>

Now i would like when i press on any of the <li> items, to change the content from the inputs. Can this be done using a directive? Thank you, Daniel.

When i press on first list item, i want the input having the template_id and template_name to set to template_id = 1 and template_name = Template1 and when i press the second list item, to set template_id to 2 and template_name to Another template.

i have a list of templates and i would like to select one of them from a list and pass the id to an input inside a form. My laout looks like this

<form>
    <input type="hidden" name="template_id" ng-model="template.template_id" />
    <input type="text" name="template_name" ng-model="template.template_name" />
    <ul>
        <li id="1">Template1</li>
        <li id="2">Another Template</li>
    </ul>
    <button type="submit"></button>
</form>

Now i would like when i press on any of the <li> items, to change the content from the inputs. Can this be done using a directive? Thank you, Daniel.

When i press on first list item, i want the input having the template_id and template_name to set to template_id = 1 and template_name = Template1 and when i press the second list item, to set template_id to 2 and template_name to Another template.

• javascript
• angularjs

1 Answer 1

Try this:

in HTML :

     <ul>
         <li ng-repeat="list in templateList" ng-click="setValue(list)">{{list.name}}</li>
     </ul>

in Controller

  $scope.templateList = [{id:1, name: 'Template1'}, {id:2, name: 'Another Template'}]

  $scope.template = {};
  $scope.setValue = function(list) {
    $scope.template.template_id = list.id;
    $scope.template.template_name = list.name;
  }

SEE DEMO