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

stackoverflow.com/questions/14994391/… 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
– csbarnes, Commented Jul 23, 2015 at 16:57

Daniel Cottone · Accepted Answer · 2015-07-23 16:59:06Z

5

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>

answered Jul 23, 2015 at 16:59

Daniel Cottone

4,52029 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Targeting elements in current iteration in ng-repeat

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related