problem in a function using Javascript + AngularJs Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30 pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!How do JavaScript closures work?How do I remove a property from a JavaScript object?var functionName = function() vs function functionName() Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?“Thinking in AngularJS” if I have a jQuery background?AngularJS: Service vs provider vs factory
Why do people think Winterfell crypts is the safest place for women, children & old people?
What does the black goddess statue do and what is it?
Why these surprising proportionalities of integrals involving odd zeta values?
Determinant of a matrix with 2 equal rows
What is the definining line between a helicopter and a drone a person can ride in?
Why is arima in R one time step off?
Did war bonds have better investment alternatives during WWII?
How long can a nation maintain a technological edge over the rest of the world?
Does a Draconic Bloodline sorcerer's doubled proficiency bonus for Charisma checks against dragons apply to all dragon types or only the chosen one?
Writing a T-SQL stored procedure to receive 4 numbers and insert them into a table
/bin/ls sorts differently than just ls
What *exactly* is electrical current, voltage, and resistance?
"Working on a knee"
Married in secret, can marital status in passport be changed at a later date?
Simulate round-robin tournament draw
Where to find documentation for `whois` command options?
Retract an already submitted Recommendation Letter (written for an undergrad student)
How to begin with a paragraph in latex
Co-worker works way more than he should
Does using the Inspiration rules for character defects encourage My Guy Syndrome?
France's Public Holidays' Puzzle
Is there a verb for listening stealthily?
Why does Java have support for time zone offsets with seconds precision?
TV series episode where humans nuke aliens before decrypting their message that states they come in peace
problem in a function using Javascript + AngularJs
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30 pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!How do JavaScript closures work?How do I remove a property from a JavaScript object?var functionName = function() vs function functionName() Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?“Thinking in AngularJS” if I have a jQuery background?AngularJS: Service vs provider vs factory
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I am studying AngularJS and Javascript for a junior programming job interview and found this problem : my function excluir() which is supposed to remove an item from my list simply doesn't work : nothing happens when I click there.
I find weird that I don't receive any type of error or log. Maybe I am doing something wrong, can someone give me a help?
<!DOCTYPE html>
<html ng-app="produtosApp">
<head>
<title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
<script src="js/angular.min.js"></script>
<script
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0, lenght = produtos.lenght; i < lenght; i++)
if(produtos[i].id === produtos.id)
produtos.splice(i, 1);
;
);
</script>
</body>
</html>
javascript angularjs
edited Mar 22 at 9:35
Pac0
8,40733049
asked Mar 9 at 4:43
RemoRemo
62
add a comment |
1
I am studying AngularJS and Javascript for a junior programming job interview and found this problem : my function excluir() which is supposed to remove an item from my list simply doesn't work : nothing happens when I click there.
I find weird that I don't receive any type of error or log. Maybe I am doing something wrong, can someone give me a help?
<!DOCTYPE html>
<html ng-app="produtosApp">
<head>
<title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
<script src="js/angular.min.js"></script>
<script
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0, lenght = produtos.lenght; i < lenght; i++)
if(produtos[i].id === produtos.id)
produtos.splice(i, 1);
;
);
</script>
</body>
</html>
javascript angularjs
edited Mar 22 at 9:35
Pac0
8,40733049
asked Mar 9 at 4:43
RemoRemo
62
1
You should say "Javascript" not JAVA. Java is completely different language from Javascript.
– Mahdi Mehrizi
Mar 9 at 8:06
add a comment |
1
1
1
I am studying AngularJS and Javascript for a junior programming job interview and found this problem : my function excluir() which is supposed to remove an item from my list simply doesn't work : nothing happens when I click there.
I find weird that I don't receive any type of error or log. Maybe I am doing something wrong, can someone give me a help?
<!DOCTYPE html>
<html ng-app="produtosApp">
<head>
<title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
<script src="js/angular.min.js"></script>
<script
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0, lenght = produtos.lenght; i < lenght; i++)
if(produtos[i].id === produtos.id)
produtos.splice(i, 1);
;
);
</script>
</body>
</html>
javascript angularjs
edited Mar 22 at 9:35
Pac0
8,40733049
asked Mar 9 at 4:43
RemoRemo
62
I am studying AngularJS and Javascript for a junior programming job interview and found this problem : my function excluir() which is supposed to remove an item from my list simply doesn't work : nothing happens when I click there.
I find weird that I don't receive any type of error or log. Maybe I am doing something wrong, can someone give me a help?
<!DOCTYPE html>
<html ng-app="produtosApp">
<head>
<title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
<script src="js/angular.min.js"></script>
<script
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0, lenght = produtos.lenght; i < lenght; i++)
if(produtos[i].id === produtos.id)
produtos.splice(i, 1);
;
);
</script>
</body>
</html>
javascript angularjs
javascript angularjs
edited Mar 22 at 9:35
Pac0
8,40733049
asked Mar 9 at 4:43
RemoRemo
62
edited Mar 22 at 9:35
Pac0
8,40733049
asked Mar 9 at 4:43
RemoRemo
62
edited Mar 22 at 9:35
Pac0
8,40733049
edited Mar 22 at 9:35
Pac0
8,40733049
edited Mar 22 at 9:35
Pac0
8,40733049
8,40733049
asked Mar 9 at 4:43
RemoRemo
62
asked Mar 9 at 4:43
RemoRemo
62
asked Mar 9 at 4:43
RemoRemo
62
62
1
You should say "Javascript" not JAVA. Java is completely different language from Javascript.
– Mahdi Mehrizi
Mar 9 at 8:06
add a comment |
1
You should say "Javascript" not JAVA. Java is completely different language from Javascript.
– Mahdi Mehrizi
Mar 9 at 8:06
1
1
You should say "Javascript" not JAVA. Java is completely different language from Javascript.
– Mahdi Mehrizi
Mar 9 at 8:06
You should say "Javascript" not JAVA. Java is completely different language from Javascript.
– Mahdi Mehrizi
Mar 9 at 8:06
add a comment |
1 Answer
1
active
oldest
votes
-1
- You have a typo in length (you typed lenght)
- you are not changing the $scope.produtos (not splicing that) so it is apparent why that is not affecting your DOM.
- you should make the compare by produto.id not produtos.id !
the code then should becomes:
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0,length = $scope.produtos.length; i < length; i++)
if($scope.produtos[i].id === produto.id)
$scope.produtos.splice(i, 1);
;
); <html ng-app="produtosApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
</body>
</html>I also suggest using anular.forEach instead of for for iterating the array. you can see there is an error when you delete an item off your array which will be fixed if you use anfgular.forEach because that works with copy of the array.
answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
add a comment |
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');
);
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%2f55074056%2fproblem-in-a-function-using-javascript-angularjs%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
-1
- You have a typo in length (you typed lenght)
- you are not changing the $scope.produtos (not splicing that) so it is apparent why that is not affecting your DOM.
- you should make the compare by produto.id not produtos.id !
the code then should becomes:
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0,length = $scope.produtos.length; i < length; i++)
if($scope.produtos[i].id === produto.id)
$scope.produtos.splice(i, 1);
;
); <html ng-app="produtosApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
</body>
</html>I also suggest using anular.forEach instead of for for iterating the array. you can see there is an error when you delete an item off your array which will be fixed if you use anfgular.forEach because that works with copy of the array.
answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
add a comment |
-1
- You have a typo in length (you typed lenght)
- you are not changing the $scope.produtos (not splicing that) so it is apparent why that is not affecting your DOM.
- you should make the compare by produto.id not produtos.id !
the code then should becomes:
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0,length = $scope.produtos.length; i < length; i++)
if($scope.produtos[i].id === produto.id)
$scope.produtos.splice(i, 1);
;
); <html ng-app="produtosApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
</body>
</html>I also suggest using anular.forEach instead of for for iterating the array. you can see there is an error when you delete an item off your array which will be fixed if you use anfgular.forEach because that works with copy of the array.
answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
add a comment |
-1
-1
-1
- You have a typo in length (you typed lenght)
- you are not changing the $scope.produtos (not splicing that) so it is apparent why that is not affecting your DOM.
- you should make the compare by produto.id not produtos.id !
the code then should becomes:
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0,length = $scope.produtos.length; i < length; i++)
if($scope.produtos[i].id === produto.id)
$scope.produtos.splice(i, 1);
;
); <html ng-app="produtosApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
</body>
</html>I also suggest using anular.forEach instead of for for iterating the array. you can see there is an error when you delete an item off your array which will be fixed if you use anfgular.forEach because that works with copy of the array.
answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
- You have a typo in length (you typed lenght)
- you are not changing the $scope.produtos (not splicing that) so it is apparent why that is not affecting your DOM.
- you should make the compare by produto.id not produtos.id !
the code then should becomes:
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0,length = $scope.produtos.length; i < length; i++)
if($scope.produtos[i].id === produto.id)
$scope.produtos.splice(i, 1);
;
); <html ng-app="produtosApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
</body>
</html>I also suggest using anular.forEach instead of for for iterating the array. you can see there is an error when you delete an item off your array which will be fixed if you use anfgular.forEach because that works with copy of the array.
var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0,length = $scope.produtos.length; i < length; i++)
if($scope.produtos[i].id === produto.id)
$scope.produtos.splice(i, 1);
;
); <html ng-app="produtosApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
</body>
</html> var app = angular.module('produtosApp', []);
app.controller('ProdutosController', function($scope)
var produtos = [
id: 1,
descricao: 'Arroz',
preco: 2.50
,
id: 2,
descricao: 'Feijao',
preco: 3.50
];
$scope.produto = ;
$scope.produtos = produtos;
$scope.salvar = function(produto)
produtos.push(produto);
$scope.produto = ;
;
$scope.excluir = function(produto)
for(var i = 0,length = $scope.produtos.length; i < length; i++)
if($scope.produtos[i].id === produto.id)
$scope.produtos.splice(i, 1);
;
); <html ng-app="produtosApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <title>Desenvolvendo Aplicações Web com AngularJS e Java</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="ProdutosController">
<!-- Cadastro -->
<form>
<h1>Cadastro</h1>
<label for="codigo">Código: </label>
<input id="codigo" name="codigo" type="text" ng-model="produto.id"/>
<br>
<label for="descricao">Descrição: </label>
<input id="descricao" name="descricao" type="text" ng-model="produto.descricao"/>
<br>
<label for="preco">Preço: </label>
<input id="preco" name="preco" type="text" ng-model="produto.preco"/>
<br>
<br>
<button ng-click="salvar(produto)"> Salvar </button>
</form>
<!-- Tabela de Preços -->
<h1>Tabelas de Preços</h1>
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="produto in produtos track by $index">
<td>produto.id</td>
<td>produto.descricao</td>
<td>produto.preco</td>
<td><a href="" ng-click="excluir(produto)" >[Excluir]</a></td>
</tr>
</tbody>
</table>
</body>
</html>answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
answered Mar 9 at 8:03
Mahdi MehriziMahdi Mehrizi
19618
19618
add a comment |
add a comment |
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.
draft saved
draft discarded
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%2f55074056%2fproblem-in-a-function-using-javascript-angularjs%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
1
You should say "Javascript" not JAVA. Java is completely different language from Javascript.
– Mahdi Mehrizi
Mar 9 at 8:06