How to change class of an element from ng-repeat?











up vote
0
down vote

favorite












I'm getting info from a json file and creating a table with the results. what i need to do is to change the class of one of the elements on a click.



this is part of my code:



$scope.firstAvailables = function(){
$http.get('/app/json/products.json')
.then(function(data){
$scope.listOfProducts = data.data.products;
}


The html view:



<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Nickname</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listOfProducts">
<th><a class="one">{{x.name}}</th>
<th><input type="text" class="form" id="theBox" value="1" style="width:40%"></th>
<th><button type="button" class="btn btn-primary" ng-click="toChange(x)">Change</button></th>
</tr>
</tbody>
</table>


What i want to do is to change the class from the input on different rows (not all, just a few). For that, i'm using the next piece of code that lives inside of toChange(x) (which lives on the button):



$scope.toChange = function(val){

//to get the specific value
var specific = val;

//to create a new name for the class
var y = 'some-' + specific.name;

//with JQuery remove the previous class and add the new one
$('#theBox').removeClass('algo').addClass(y);

//With this i receive on the console all the input html tag
console.log(document.getElementById('theBox'));
}


To here everything it's ok if i click on one row. But, if then i click on another, the class from the selected row, sum the name previous name and the new instead of replace:



console log from very first clicked element



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


console for the second element



<input type="text" class="algo-non algo-mollit" id="theBox" value="1" style="width:40%">


console for the next element



<input type="text" class="algo-non algo-mollit algo-liquit" id="theBox" value="1" style="width:40%">


What can i do to prevent the sum of the previous class names? The idea is to have on every click:



first click:



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


second click:



<input type="text" class="algo-mollit" id="theBox" value="1" style="width:40%">


third click:



<input type="text" class="algo-liquit" id="theBox" value="1" style="width:40%">


I'm using AngularJs, Javascript and Jquery.



Thanx in advance.










share|improve this question




















  • 3




    don't repeat id="theBox" while use ng-repeat.
    – Shiv Kumar Baghel
    Nov 20 at 3:12












  • This piece of code looks wrong at couple of places... 1. using id in ng-repeat, 2. using jquery to add/remove class, 3. using removeClass to remove the class "algo" not "algo-item.name"
    – binariedMe
    Nov 20 at 3:15










  • Mixing jQuery and AngularJS like that is asking for trouble. Use the ng-class directive to manipulate classes.
    – georgeawg
    Nov 20 at 5:18















up vote
0
down vote

favorite












I'm getting info from a json file and creating a table with the results. what i need to do is to change the class of one of the elements on a click.



this is part of my code:



$scope.firstAvailables = function(){
$http.get('/app/json/products.json')
.then(function(data){
$scope.listOfProducts = data.data.products;
}


The html view:



<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Nickname</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listOfProducts">
<th><a class="one">{{x.name}}</th>
<th><input type="text" class="form" id="theBox" value="1" style="width:40%"></th>
<th><button type="button" class="btn btn-primary" ng-click="toChange(x)">Change</button></th>
</tr>
</tbody>
</table>


What i want to do is to change the class from the input on different rows (not all, just a few). For that, i'm using the next piece of code that lives inside of toChange(x) (which lives on the button):



$scope.toChange = function(val){

//to get the specific value
var specific = val;

//to create a new name for the class
var y = 'some-' + specific.name;

//with JQuery remove the previous class and add the new one
$('#theBox').removeClass('algo').addClass(y);

//With this i receive on the console all the input html tag
console.log(document.getElementById('theBox'));
}


To here everything it's ok if i click on one row. But, if then i click on another, the class from the selected row, sum the name previous name and the new instead of replace:



console log from very first clicked element



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


console for the second element



<input type="text" class="algo-non algo-mollit" id="theBox" value="1" style="width:40%">


console for the next element



<input type="text" class="algo-non algo-mollit algo-liquit" id="theBox" value="1" style="width:40%">


What can i do to prevent the sum of the previous class names? The idea is to have on every click:



first click:



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


second click:



<input type="text" class="algo-mollit" id="theBox" value="1" style="width:40%">


third click:



<input type="text" class="algo-liquit" id="theBox" value="1" style="width:40%">


I'm using AngularJs, Javascript and Jquery.



Thanx in advance.










share|improve this question




















  • 3




    don't repeat id="theBox" while use ng-repeat.
    – Shiv Kumar Baghel
    Nov 20 at 3:12












  • This piece of code looks wrong at couple of places... 1. using id in ng-repeat, 2. using jquery to add/remove class, 3. using removeClass to remove the class "algo" not "algo-item.name"
    – binariedMe
    Nov 20 at 3:15










  • Mixing jQuery and AngularJS like that is asking for trouble. Use the ng-class directive to manipulate classes.
    – georgeawg
    Nov 20 at 5:18













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I'm getting info from a json file and creating a table with the results. what i need to do is to change the class of one of the elements on a click.



this is part of my code:



$scope.firstAvailables = function(){
$http.get('/app/json/products.json')
.then(function(data){
$scope.listOfProducts = data.data.products;
}


The html view:



<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Nickname</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listOfProducts">
<th><a class="one">{{x.name}}</th>
<th><input type="text" class="form" id="theBox" value="1" style="width:40%"></th>
<th><button type="button" class="btn btn-primary" ng-click="toChange(x)">Change</button></th>
</tr>
</tbody>
</table>


What i want to do is to change the class from the input on different rows (not all, just a few). For that, i'm using the next piece of code that lives inside of toChange(x) (which lives on the button):



$scope.toChange = function(val){

//to get the specific value
var specific = val;

//to create a new name for the class
var y = 'some-' + specific.name;

//with JQuery remove the previous class and add the new one
$('#theBox').removeClass('algo').addClass(y);

//With this i receive on the console all the input html tag
console.log(document.getElementById('theBox'));
}


To here everything it's ok if i click on one row. But, if then i click on another, the class from the selected row, sum the name previous name and the new instead of replace:



console log from very first clicked element



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


console for the second element



<input type="text" class="algo-non algo-mollit" id="theBox" value="1" style="width:40%">


console for the next element



<input type="text" class="algo-non algo-mollit algo-liquit" id="theBox" value="1" style="width:40%">


What can i do to prevent the sum of the previous class names? The idea is to have on every click:



first click:



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


second click:



<input type="text" class="algo-mollit" id="theBox" value="1" style="width:40%">


third click:



<input type="text" class="algo-liquit" id="theBox" value="1" style="width:40%">


I'm using AngularJs, Javascript and Jquery.



Thanx in advance.










share|improve this question















I'm getting info from a json file and creating a table with the results. what i need to do is to change the class of one of the elements on a click.



this is part of my code:



$scope.firstAvailables = function(){
$http.get('/app/json/products.json')
.then(function(data){
$scope.listOfProducts = data.data.products;
}


The html view:



<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Nickname</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listOfProducts">
<th><a class="one">{{x.name}}</th>
<th><input type="text" class="form" id="theBox" value="1" style="width:40%"></th>
<th><button type="button" class="btn btn-primary" ng-click="toChange(x)">Change</button></th>
</tr>
</tbody>
</table>


What i want to do is to change the class from the input on different rows (not all, just a few). For that, i'm using the next piece of code that lives inside of toChange(x) (which lives on the button):



$scope.toChange = function(val){

//to get the specific value
var specific = val;

//to create a new name for the class
var y = 'some-' + specific.name;

//with JQuery remove the previous class and add the new one
$('#theBox').removeClass('algo').addClass(y);

//With this i receive on the console all the input html tag
console.log(document.getElementById('theBox'));
}


To here everything it's ok if i click on one row. But, if then i click on another, the class from the selected row, sum the name previous name and the new instead of replace:



console log from very first clicked element



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


console for the second element



<input type="text" class="algo-non algo-mollit" id="theBox" value="1" style="width:40%">


console for the next element



<input type="text" class="algo-non algo-mollit algo-liquit" id="theBox" value="1" style="width:40%">


What can i do to prevent the sum of the previous class names? The idea is to have on every click:



first click:



<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">


second click:



<input type="text" class="algo-mollit" id="theBox" value="1" style="width:40%">


third click:



<input type="text" class="algo-liquit" id="theBox" value="1" style="width:40%">


I'm using AngularJs, Javascript and Jquery.



Thanx in advance.







javascript jquery html angularjs






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 at 4:48









georgeawg

32.2k104966




32.2k104966










asked Nov 20 at 2:54









Chuck Villavicencio

12910




12910








  • 3




    don't repeat id="theBox" while use ng-repeat.
    – Shiv Kumar Baghel
    Nov 20 at 3:12












  • This piece of code looks wrong at couple of places... 1. using id in ng-repeat, 2. using jquery to add/remove class, 3. using removeClass to remove the class "algo" not "algo-item.name"
    – binariedMe
    Nov 20 at 3:15










  • Mixing jQuery and AngularJS like that is asking for trouble. Use the ng-class directive to manipulate classes.
    – georgeawg
    Nov 20 at 5:18














  • 3




    don't repeat id="theBox" while use ng-repeat.
    – Shiv Kumar Baghel
    Nov 20 at 3:12












  • This piece of code looks wrong at couple of places... 1. using id in ng-repeat, 2. using jquery to add/remove class, 3. using removeClass to remove the class "algo" not "algo-item.name"
    – binariedMe
    Nov 20 at 3:15










  • Mixing jQuery and AngularJS like that is asking for trouble. Use the ng-class directive to manipulate classes.
    – georgeawg
    Nov 20 at 5:18








3




3




don't repeat id="theBox" while use ng-repeat.
– Shiv Kumar Baghel
Nov 20 at 3:12






don't repeat id="theBox" while use ng-repeat.
– Shiv Kumar Baghel
Nov 20 at 3:12














This piece of code looks wrong at couple of places... 1. using id in ng-repeat, 2. using jquery to add/remove class, 3. using removeClass to remove the class "algo" not "algo-item.name"
– binariedMe
Nov 20 at 3:15




This piece of code looks wrong at couple of places... 1. using id in ng-repeat, 2. using jquery to add/remove class, 3. using removeClass to remove the class "algo" not "algo-item.name"
– binariedMe
Nov 20 at 3:15












Mixing jQuery and AngularJS like that is asking for trouble. Use the ng-class directive to manipulate classes.
– georgeawg
Nov 20 at 5:18




Mixing jQuery and AngularJS like that is asking for trouble. Use the ng-class directive to manipulate classes.
– georgeawg
Nov 20 at 5:18












1 Answer
1






active

oldest

votes

















up vote
1
down vote



accepted










The problem is that $('#theBox') is selecting all of the inputs.




  1. First click: the class algo-non is added to all of the inputs.

  2. Second click: the class algo-mollit is added to all of the inputs.

  3. Third click: the class algo-liquit is added to all of the inputs.


Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.



// Guaranteed to be unique
<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">

// Risk duplicates (if items have same name)
<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">





share|improve this answer





















  • So, the id will be theBox-non1 where "non" is the name of the element, right? Then, just have to replace on the JQuery function $(theBox-non1).removeClass('form').addClass(y); where y is the received value (item.name)?
    – Chuck Villavicencio
    Nov 20 at 3:38






  • 1




    Yes, something like that. You probably could avoid adding the 1 and use $('#theBox-' + item.name')
    – Chris Happy
    Nov 20 at 3:40










  • After make the changes, now on the console i get a null response Cannot read property 'className' of null
    – Chuck Villavicencio
    Nov 20 at 3:57











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',
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


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385551%2fhow-to-change-class-of-an-element-from-ng-repeat%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
1
down vote



accepted










The problem is that $('#theBox') is selecting all of the inputs.




  1. First click: the class algo-non is added to all of the inputs.

  2. Second click: the class algo-mollit is added to all of the inputs.

  3. Third click: the class algo-liquit is added to all of the inputs.


Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.



// Guaranteed to be unique
<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">

// Risk duplicates (if items have same name)
<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">





share|improve this answer





















  • So, the id will be theBox-non1 where "non" is the name of the element, right? Then, just have to replace on the JQuery function $(theBox-non1).removeClass('form').addClass(y); where y is the received value (item.name)?
    – Chuck Villavicencio
    Nov 20 at 3:38






  • 1




    Yes, something like that. You probably could avoid adding the 1 and use $('#theBox-' + item.name')
    – Chris Happy
    Nov 20 at 3:40










  • After make the changes, now on the console i get a null response Cannot read property 'className' of null
    – Chuck Villavicencio
    Nov 20 at 3:57















up vote
1
down vote



accepted










The problem is that $('#theBox') is selecting all of the inputs.




  1. First click: the class algo-non is added to all of the inputs.

  2. Second click: the class algo-mollit is added to all of the inputs.

  3. Third click: the class algo-liquit is added to all of the inputs.


Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.



// Guaranteed to be unique
<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">

// Risk duplicates (if items have same name)
<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">





share|improve this answer





















  • So, the id will be theBox-non1 where "non" is the name of the element, right? Then, just have to replace on the JQuery function $(theBox-non1).removeClass('form').addClass(y); where y is the received value (item.name)?
    – Chuck Villavicencio
    Nov 20 at 3:38






  • 1




    Yes, something like that. You probably could avoid adding the 1 and use $('#theBox-' + item.name')
    – Chris Happy
    Nov 20 at 3:40










  • After make the changes, now on the console i get a null response Cannot read property 'className' of null
    – Chuck Villavicencio
    Nov 20 at 3:57













up vote
1
down vote



accepted







up vote
1
down vote



accepted






The problem is that $('#theBox') is selecting all of the inputs.




  1. First click: the class algo-non is added to all of the inputs.

  2. Second click: the class algo-mollit is added to all of the inputs.

  3. Third click: the class algo-liquit is added to all of the inputs.


Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.



// Guaranteed to be unique
<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">

// Risk duplicates (if items have same name)
<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">





share|improve this answer












The problem is that $('#theBox') is selecting all of the inputs.




  1. First click: the class algo-non is added to all of the inputs.

  2. Second click: the class algo-mollit is added to all of the inputs.

  3. Third click: the class algo-liquit is added to all of the inputs.


Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.



// Guaranteed to be unique
<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">

// Risk duplicates (if items have same name)
<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 20 at 3:16









Chris Happy

4,4581833




4,4581833












  • So, the id will be theBox-non1 where "non" is the name of the element, right? Then, just have to replace on the JQuery function $(theBox-non1).removeClass('form').addClass(y); where y is the received value (item.name)?
    – Chuck Villavicencio
    Nov 20 at 3:38






  • 1




    Yes, something like that. You probably could avoid adding the 1 and use $('#theBox-' + item.name')
    – Chris Happy
    Nov 20 at 3:40










  • After make the changes, now on the console i get a null response Cannot read property 'className' of null
    – Chuck Villavicencio
    Nov 20 at 3:57


















  • So, the id will be theBox-non1 where "non" is the name of the element, right? Then, just have to replace on the JQuery function $(theBox-non1).removeClass('form').addClass(y); where y is the received value (item.name)?
    – Chuck Villavicencio
    Nov 20 at 3:38






  • 1




    Yes, something like that. You probably could avoid adding the 1 and use $('#theBox-' + item.name')
    – Chris Happy
    Nov 20 at 3:40










  • After make the changes, now on the console i get a null response Cannot read property 'className' of null
    – Chuck Villavicencio
    Nov 20 at 3:57
















So, the id will be theBox-non1 where "non" is the name of the element, right? Then, just have to replace on the JQuery function $(theBox-non1).removeClass('form').addClass(y); where y is the received value (item.name)?
– Chuck Villavicencio
Nov 20 at 3:38




So, the id will be theBox-non1 where "non" is the name of the element, right? Then, just have to replace on the JQuery function $(theBox-non1).removeClass('form').addClass(y); where y is the received value (item.name)?
– Chuck Villavicencio
Nov 20 at 3:38




1




1




Yes, something like that. You probably could avoid adding the 1 and use $('#theBox-' + item.name')
– Chris Happy
Nov 20 at 3:40




Yes, something like that. You probably could avoid adding the 1 and use $('#theBox-' + item.name')
– Chris Happy
Nov 20 at 3:40












After make the changes, now on the console i get a null response Cannot read property 'className' of null
– Chuck Villavicencio
Nov 20 at 3:57




After make the changes, now on the console i get a null response Cannot read property 'className' of null
– Chuck Villavicencio
Nov 20 at 3:57


















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














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385551%2fhow-to-change-class-of-an-element-from-ng-repeat%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen