Angular - delete $ scope.categoria_nova;

Question

Angular - delete $ scope.categoria_nova;

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

My delete does not work when registering a new category:

The form does not clear the fields, what can it be?

JS:

app.controller('categoriasCtrl', function ($scope, $http) {
$scope.categorias = [
    {id: 10, nome: 'Categoria teste 2', ativo: 1},
    {id: 11, nome: 'Categoria teste 3', ativo: 0},
    {id: 12, nome: 'Categoria teste 4', ativo: 1}
    ];
$scope.addCategoria = function (a){
    $scope.categorias.push(a);
    delete $scope.categoria_nova;
};

HTML

<form name="categoriaForm">
			<md-content md-theme="docs-dark" layout-padding="" layout="row" layout-sm="column">			 
			    <md-input-container>		      
			      <label>Nome</label>
			      <input name="nome" ng-model="categoria_nova.nome">
			    </md-input-container>
			    <div class="checkbox">
				    <md-checkbox name="ativo" ng-model="categoria_nova.ativo" aria-label="Ativo">		    	
			        </md-checkbox>	
			    	<md-tooltip md-direction="top">
						Ativa
					</md-tooltip>
			    </div>	   
			    <md-button class="md-warn md-raised cadastrar" ng-click="addCategoria(categoria_nova)">
			    	Cadastrar
			    </md-button>
			</md-content>
		</form>
</div>
{{categorias}}
<table class="table table-striped table_lista">
	    <thead>
	  		<tr>
	  			<th class="">	  			
		  			<a href="" ng-click="ordenarPor('id')">
		  			 <span class="direction glyphicon glyphicon-sort-by-attributes{{directionid}}" aria-hidden="true"></span>#
					</a>
	  			 </th>	  			
	  			<th>
	  				<a  href="" ng-click="ordenarPor('nome')">
		  			 <span class="direction glyphicon glyphicon-sort-by-alphabet{{directionnome}}" aria-hidden="true"></span>
		  			 Nome
					</a>
				</th>
				<th>Ativa</th>
	  			<th>Ações</th>
	  		</tr>
	  	</thead>
	  	<tbody ng-repeat="categoria in categorias | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao">

	  		<tr>
	  			<td>
	  				{{categoria.id}}
	  			</td>	  			
	  			<td>
	  				{{categoria.nome}}
	  			</td>
	  			<td>
	  				<span ng-if="categoria.ativo == 1">
						<span class="ativo glyphicon glyphicon-ok" aria-hidden="true"></span>
					</span>
	  			</td>
	  			<td>
	  				<md-button class="md-icon-button md-primary" aria-label="Settings">
				       <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
				    </md-button>
				    <md-button class="md-icon-button md-accent" aria-label="Settings">
				       <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
				    </md-button>
	  			</td>	  			
	  		</tr>
	  		
	  		
	  	</tbody>
	</table>

angularjs delete angularjs-scope

asked by anonymous 03.12.2015 / 14:40

2 answers

0

When your screen renders, the angle view is that it refers to the $scope.categoria_nova variable that was not instantiated in the controller, so it automatically instantiates it.

When you run the code delete $scope.categoria_nova you are just deleting the scope variable, without providing something that the angle can bind to the screen, so the screen has no way to update itself.

A simple solution is to do the following $scope.categoria_nova = {};

03.12.2015 / 14:47

Use the same getInputStream () for 2 different bufferedReader Robot to perform web procedures similar to PhantomJS

score 2 · Accepted Answer

Hello, hello!

I rebuilt your code and put it to work.

Take a look at this Plunker running

var app = angular.module('appBonito', []);

app.controller('categoriasCtrl', function ($scope, $http) {
$scope.categorias = [
    {id: 10, nome: 'Categoria teste 2', ativo: 1},
    {id: 11, nome: 'Categoria teste 3', ativo: 0},
    {id: 12, nome: 'Categoria teste 4', ativo: 1}
    ];


$scope.addCategoria = function (a){
    $scope.categorias.push(a);
    delete $scope.categoria_nova;
}
});

I did not change much, just added the necessary to work. In case, ng-app, ng-controller and instantiate the appBonito module. The addCategory function was incomplete, but probably because you forgot to paste the controller close. So, take a look and correct based on that code.

Something important to realize is terrible efficiency of delete . Therefore, it is advisable to use one of the solutions below or presented in the link:

$ scope.category_nova = undefined = null;
$ scope.category_nova = {};