AngularJS Targeting elements in current iteration in ng-repeat

Question

I am sure this question has been answered numerous times in one form or another, however I am not sure what to search for to find the solution.

Say we have a simple ng-repeat:

<div ng-repeat="item in items">
   <input type="text" value="{{item.name}}">
   <a ng-click="getTxtBoxVal(whatDoIPassInHere)">Get Text Box Value</a>
</div>

in the javaScript file:

   function $scope.getTxtBoxVal(val) {
       alert(val)
   }

Basically I want to know what should get passed in the whatDoIPassInHere parameter, which in jquery would be something like: $(this).siblings(input).val()

I do have a workaround which is to give each textbox a unique ID:

<input type="text" id="myTextBox_{{index}}" value="{{item.name}}>

and target it with the unique ID, but I am sure there's a more elegant way to handle this

http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background is a great read if you are coming from jquery. But to give you a little direction: You are going to want to use `ng-model="item.name"` instead of `value=...`. Then you would just pass `item` in place of `whatDoIPassInHere`. — csbarnes, Jul 23 '15 at 16:57

score 5 · Accepted Answer · answered Jul 23 '15 at 16:59

You're not associating the input with a model, so angular has no idea how to reference the value. See this plunkr for how to accomplish what you are asking.

Controller

$scope.things = [
    {
      'name': 'apple',
      'value': '12',
      'isTasty': true
    },
    {
      'name': 'tire',
      'value': '7',
      'isTasty': false
    },
    {
      'name': 'carrot',
      'value': '9',
      'isTasty': false
    },
    {
      'name': 'cake',
      'value': '1',
      'isTasty': true
    }
  ];

  $scope.getVal = function (value) {
    alert(value);
  };

View

<div ng-repeat="item in things">
      <input type="text" ng-model="item.name" value="{{item.name}}">
      <a href="#" ng-click="getVal(item.name)">Get Text Box Value</a>
    </div>

AngularJS Targeting elements in current iteration in ng-repeat

1 Answers1