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.
javascript jquery html angularjs
add a comment |
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.
javascript jquery html angularjs
3
don't repeatid="theBox"
while useng-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 theng-class
directive to manipulate classes.
– georgeawg
Nov 20 at 5:18
add a comment |
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.
javascript jquery html angularjs
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
javascript jquery html angularjs
edited Nov 20 at 4:48
georgeawg
32.2k104966
32.2k104966
asked Nov 20 at 2:54
Chuck Villavicencio
12910
12910
3
don't repeatid="theBox"
while useng-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 theng-class
directive to manipulate classes.
– georgeawg
Nov 20 at 5:18
add a comment |
3
don't repeatid="theBox"
while useng-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 theng-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
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
The problem is that $('#theBox')
is selecting all of the inputs.
- First click: the class
algo-non
is added to all of the inputs. - Second click: the class
algo-mollit
is added to all of the inputs. - 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%">
So, the id will betheBox-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);
wherey
is the received value (item.name)?
– Chuck Villavicencio
Nov 20 at 3:38
1
Yes, something like that. You probably could avoid adding the1
and use$('#theBox-' + item.name')
– Chris Happy
Nov 20 at 3:40
After make the changes, now on the console i get a null responseCannot read property 'className' of null
– Chuck Villavicencio
Nov 20 at 3:57
add a comment |
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.
- First click: the class
algo-non
is added to all of the inputs. - Second click: the class
algo-mollit
is added to all of the inputs. - 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%">
So, the id will betheBox-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);
wherey
is the received value (item.name)?
– Chuck Villavicencio
Nov 20 at 3:38
1
Yes, something like that. You probably could avoid adding the1
and use$('#theBox-' + item.name')
– Chris Happy
Nov 20 at 3:40
After make the changes, now on the console i get a null responseCannot read property 'className' of null
– Chuck Villavicencio
Nov 20 at 3:57
add a comment |
up vote
1
down vote
accepted
The problem is that $('#theBox')
is selecting all of the inputs.
- First click: the class
algo-non
is added to all of the inputs. - Second click: the class
algo-mollit
is added to all of the inputs. - 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%">
So, the id will betheBox-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);
wherey
is the received value (item.name)?
– Chuck Villavicencio
Nov 20 at 3:38
1
Yes, something like that. You probably could avoid adding the1
and use$('#theBox-' + item.name')
– Chris Happy
Nov 20 at 3:40
After make the changes, now on the console i get a null responseCannot read property 'className' of null
– Chuck Villavicencio
Nov 20 at 3:57
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
The problem is that $('#theBox')
is selecting all of the inputs.
- First click: the class
algo-non
is added to all of the inputs. - Second click: the class
algo-mollit
is added to all of the inputs. - 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%">
The problem is that $('#theBox')
is selecting all of the inputs.
- First click: the class
algo-non
is added to all of the inputs. - Second click: the class
algo-mollit
is added to all of the inputs. - 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%">
answered Nov 20 at 3:16
Chris Happy
4,4581833
4,4581833
So, the id will betheBox-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);
wherey
is the received value (item.name)?
– Chuck Villavicencio
Nov 20 at 3:38
1
Yes, something like that. You probably could avoid adding the1
and use$('#theBox-' + item.name')
– Chris Happy
Nov 20 at 3:40
After make the changes, now on the console i get a null responseCannot read property 'className' of null
– Chuck Villavicencio
Nov 20 at 3:57
add a comment |
So, the id will betheBox-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);
wherey
is the received value (item.name)?
– Chuck Villavicencio
Nov 20 at 3:38
1
Yes, something like that. You probably could avoid adding the1
and use$('#theBox-' + item.name')
– Chris Happy
Nov 20 at 3:40
After make the changes, now on the console i get a null responseCannot 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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
3
don't repeat
id="theBox"
while useng-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