Pacuraru Daniel Pacuraru Daniel - 13 days ago 5
AngularJS Question

What is the angularjs directive to select list item?

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.

Answer

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