How to pass anything from DOM-element into function defined in $scope

Question

Example:

<div ng-repeat="obj in objList">
    <input type="text" id="obj_{{obj.id}}"/>
    <button ng-click="removeRow(NEED PARAM HERE)">Remove</button>
</div>

I could use button's id or maybe parent's, but I dont know exactly how.

And second similar case: when I want get some value from input, for example. How can I do it?

score 3 · Accepted Answer · answered Oct 25 '14 at 13:50

3

Just pass obj in your function, and then remove the object obj from objList in your controller, it will disappear from your view, that's how angular's data binding works :

<div ng-repeat="obj in objList">
  <input type="text" id="obj_{{obj.id}}"/>
  <button ng-click="removeRow(obj)">Remove</button>
</div>

And in you controller:

$scope.removeRow = function(obj) { 
  var index = $scope.objList.indexOf(obj);
  $scope.objList.splice(index, 1);     
}

answered Oct 25 '14 at 13:50

deonclem

860
10
25

Works well, thanks! But if I want pass value from textfield, what can I do here? Oh, and please one more question: how can I bind value from input field to some field in obj? – Maksim Nesterenko Oct 25 '14 at 14:02
You can try : `` and then pass `obj` or `obj.text` to a function in your controller, the same way as above. – deonclem Oct 25 '14 at 14:08
it's looks a little stange - to create a new model for each element... or no? :) – Maksim Nesterenko Oct 26 '14 at 05:19
Each element is already bound to the model with your ng-repeat, you just add a property to those objetcs. – deonclem Oct 26 '14 at 17:16

score 3 · Answer 2 · edited May 23 '17 at 12:20

A little hard to follow your question, but are you trying to pass the value from the text field to the function so you can remove the row from the list?

If that is true then the you want to do something like this.

You'll want to use the ngRepeat track by functionality. See https://docs.angularjs.org/api/ng/directive/ngRepeat

HTML

<div ng-repeat="obj in objList track by $index">
  <input type="text" id="obj_{{obj.id}}" />
  <button ng-click="removeRow($index)">Remove</button>
</div>

At that point you're just using basic Javascript splice functionality to remove an item from an Array by index. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

JS

 $scope.removeRow = function($index) {
  $scope.objList.splice($index, 1);
};

See also AngularJS How to remove an Item from scope

Beware of `$index` if `objList` is filtered in the template ! It is safer to directly use the object. — deonclem, Oct 25 '14 at 13:58
Thanks for the heads up @deonclem, we normally do our filtering via an API and then update the $scope, so we haven't run into this yet. Appreciate the tip! — Joshua Powell, Oct 27 '14 at 17:35

How to pass anything from DOM-element into function defined in $scope

2 Answers2