Angular - delete $Scope.categoria_nova;

Question

My delete does not work when registering a new category:

The aphorist doesn’t clear the fields, which can 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>

Answer 1

Whoa, hey, hey, hey!

I rebuilt your code and put it to work.

Take a look at this Working plunker

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 didn’t change much, just added the necessary to work. In this case, ng-app, ng-controller and instantiate the appBonito module. The addCategory function was incomplete, but probably because you forgot to paste the controller lock. So take a look and fix it based on this code.

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

• $Scope.categoria_nova = Undefined = null;

• $Scope.categoria_new = {};

Answer 2

When your screen renders, the angular understands that it references the variable $scope.categoria_nova that was not instantiated in the controller, so it is the instantiation automatically.

When you run the code delete $scope.categoria_nova you are just deleting the variable from the scope, without providing something that the angular can make Binding to the screen, so the screen has no way to update.

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