Set value of input depending on element clicked in Angular

Question

I have made the following plunker:

https://plnkr.co/edit/Ff2O2TGC4WLaD62fJmvA?p=preview

I would like the value of the input to be the item.name clicked.

Here is the code:

<body ng-app="myApp">

<div ng-controller="MyController">
  <ul ng-repeat="item in collection">
    <li ng-click="edit('{{item.name}}')">{{item.name}}</li>
  </ul>
</div>

  <input  name="myinput" ng-model="myinput"  />

</body>

Js:

var app = angular.module('myApp', [])

.controller('MyController', function($scope, $http) {

  $scope.collection = [
      {name:'foo'},
      {name:'bar'},
      {name:'foobar'},
      {name:'barfoo'},
    ];

  $scope.edit = function(current_name) {

    this.myinput = current_name;

    console.log(current_name);

  }

})

Mike Perrenoud · Accepted Answer · 2016-06-06 15:04:05Z

1

So there are a few problems here. The first is how you're passing item.name into the edit function. Instead of edit('{{item.name}}') it should simply be edit(item.name).

The next is this.myinput in the script.js isn't going to work; it needs to be $scope.myinput.

Finally, the input in the markup needs to be inside the div that defines the controller.

I've modified the Plunkr to work: https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=info

edited Jun 6, 2016 at 15:04

answered Jun 6, 2016 at 15:01

Mike Perrenoud

68.1k32 gold badges167 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2016-06-06 15:00:23Z

1

Angular expression can't have interpolation tags. Correct syntax, like if it was normal Javascript:

<li ng-click="edit(item.name)">{{item.name}}</li>

answered Jun 6, 2016 at 15:00

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Kyle · Accepted Answer · 2016-06-06 15:16:52Z

0

You don't have to call a function. Just do.

<li ng-click="$parent.myinput = item.name">

answered Jun 6, 2016 at 15:16

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Set value of input depending on element clicked in Angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related