change class inside of ng-repeat to get input value

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.

edited Nov 19 '18 at 18:44

Yash Karanke

15918

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

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

add a comment |

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.

edited Nov 19 '18 at 18:44

Yash Karanke

15918

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

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

add a comment |

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.

edited Nov 19 '18 at 18:44

Yash Karanke

15918

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

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.

javascript angularjs angularjs-ng-repeat

edited Nov 19 '18 at 18:44

Yash Karanke

15918

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

edited Nov 19 '18 at 18:44

Yash Karanke

15918

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

edited Nov 19 '18 at 18:44

Yash Karanke

15918

edited Nov 19 '18 at 18:44

Yash Karanke

15918

edited Nov 19 '18 at 18:44

Yash Karanke

15918

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

asked Nov 19 '18 at 18:39

Chuck Villavicencio

13110

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

add a comment |

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

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

add a comment |

1 Answer
1

active

oldest

votes

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

Yash Karanke

15918

answered Nov 19 '18 at 18:49

nircraft

1,244218

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

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380787%2fchange-class-inside-of-ng-repeat-to-get-input-value%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

edited Nov 19 '18 at 20:06

Yash Karanke

15918

answered Nov 19 '18 at 18:49

nircraft

1,244218

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

|
show 2 more comments

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>

edited Nov 19 '18 at 20:06

Yash Karanke

15918

answered Nov 19 '18 at 18:49

nircraft

1,244218

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

|
show 2 more comments

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>

edited Nov 19 '18 at 20:06

Yash Karanke

15918

answered Nov 19 '18 at 18:49

nircraft

1,244218

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>

edited Nov 19 '18 at 20:06

Yash Karanke

15918

answered Nov 19 '18 at 18:49

nircraft

1,244218

edited Nov 19 '18 at 20:06

Yash Karanke

15918

edited Nov 19 '18 at 20:06

Yash Karanke

15918

edited Nov 19 '18 at 20:06

Yash Karanke

15918

answered Nov 19 '18 at 18:49

nircraft

1,244218

answered Nov 19 '18 at 18:49

nircraft

1,244218

answered Nov 19 '18 at 18:49

nircraft

1,244218

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

|
show 2 more comments

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

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

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu