change class inside of ng-repeat to get input value

Question

I'm creating a table with ng-repeat. This table have an input where people can write anything. My problem comes when i wanna get each value of the selected input, 'cause only gets the very first row:

<table class="table">
    <thead>
    <tr>
        <th style="text-align:center">Name</th>
        <th style="text-align:center">LastName</th>
        <th style="text-align:center;width:200px">Write a funny commentary</th>
        <th style="text-align:center">Save</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in myItems">
        <th style="font-weight:normal;text-align:center">{{item.name}}</th>
        <th style="font-weight:normal;text-align:center">{{item.lastName}}</th>
        <th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
            <input type="text" class="form-control" id="theBox">
        </th>
<th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">  
<button type="button" class=btn btn-primary ng-click="saveComment(item)">Save</button>
</th>
            </tr>
            </tbody>
        </table>
</tbody>
</table>

I know that the input is getting the same id for all the returned values. There's a way to get the specific data of any created row? Even i've tried with querySelectorAll() but is not working:

$scope.textOfValue = function(t){
        $scope.theValue = t;
        //to get the specific data of row

        var xandria = document.querySelectorAll("#boxOf"), k, length;

        for(k = 0, length = xandria.length; k < length; k++){
            xandria[k].classList.add('form-control.x');
        }

        $scope.getText = document.getElementById('theBox').value;
        console.log($scope.getText);

    }

Someone suggest that the solution is here prototypical inheritance in AngularJS?, but i'm so far to understand it at all... can you help me with an example, please?

I'm using AngularJs and Javascript.

Thanx in advance.

The `id` property of a DOM element should always be unique. If anything, give each of these inputs the same `className`, then append the index of your ng-repeat onto the end of the id value, after you add your event handlers to the inputs, onces one is triggered you can just substring the index off of the id property of the current input to figure out which row you are dealing with. — Ryan Wilson, Nov 19 '18 at 18:44

score 2 · Accepted Answer · edited Nov 19 '18 at 20:06

2

You are running into this problem because ng-repeat is creating the input with same id again and again. You should use trackBy to get the index and apply that index for the InputField Id and at the same time bind your ng-Model using the index of loop.

Ex:

<tr ng-repeat="item in myItems track by $index">
    <th style="font-weight:normal;text-align:center">{{item.name}}</th>
    <th style="font-weight:normal;text-align:center">{{item.lastName}}</th>
    <th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
        <input type="text" class="form-control" id="theBox-{{$index}}" ng-model="newInputValue[$index].value>
                                </th>
<th style=" font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
        <button type="button" class=btn btn-primary ng-click="saveComment(item)">Save</button>
    </th>
</tr>

Now,you have array of newInputValue, You can access it using index .It will create new object. Also if you try to access the input field by ID, You can use $index to get the individual input field.

edited Nov 19 '18 at 20:06

answered Nov 19 '18 at 18:49

nircraft

8,242
5
30
46

Thanx, but i'm getting an undefined if i print on my console. I'm passing `document.getElementById(theBox-{{$index}}).value`. Is correct this way? – Chuck Villavicencio Nov 19 '18 at 20:23
No, This is not the way to access it's value. You need `document.getElementById(theBox-2).value` where 2 is the index of the input field. Or The simplest way is to use `newInputValue[indexNumber] `inside controller to get the object and check it's value – nircraft Nov 19 '18 at 20:49
Sorry, still getting a null :( – Chuck Villavicencio Nov 19 '18 at 21:21
@ChuckVillavicencio what did you try? can you share a plunker with what you did? – nircraft Nov 19 '18 at 21:23
On the `saveComment(item)` i catch the data with `$scope.theValue = x`. Then i've tried with `document.getElementById('theBox-$scope.theValue.id').value` and `document.getElementById('theBox-{{$scope.theValue.id}}').value` and `document.getElementById('{{theBox-$scope.theValue.id}}').value` but still getting `Cannot set property 'value' of null` – Chuck Villavicencio Nov 19 '18 at 21:32
You should not use `{{$scope.theValue.id}}` inside `document.getElementById()`, document.getElementById expects a string parameter. You should try to access if needed using ` `document.getElementById('theBox-1')` – nircraft Nov 19 '18 at 21:42
also why do you have to do all that, Just check the value of `newInputValue` object inside `saveComment`. try to do `console.log(newInputValue)`. it should show what you got in the modal. Make sure you define newInputValue mnodal in your controller initially – nircraft Nov 19 '18 at 21:46

change class inside of ng-repeat to get input value

1 Answers1