asked on

Select with AngularJS

Hello guys,

I stay started learning with Angular Js and have a doubt. How do I fill in the data of a select?

My code

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>AngularJS com Mysql</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="cntrl">
    <form>
    Student Id:   <input type="text"    ng-model="id"   name="id" ng-disabled="obj.idisable">
    Student Name: <input type="text"    ng-model="name" name="name">
    <input type="button" value="{{btnName}}" ng-click="inserdata()">
    {{msg}}
    </form>

<table>
	<thead>
    	<tr>
        <th bgcolor="#EAEAEA"><span class="style5">Name</span></th>
        <th bgcolor="#EAEAEA"><span class="style5">Roll No</span></th>
      </tr>
    </thead>
    <tbody>
    	<select ng-model="cntrl" ng-options="student.Id as student.nome for student in students"></select>
    	<tr ng-repeat="student in data">
				<td align="center"><span class="style8">{{student.Id}}</span></td>
				<td align="center"><span class="style8">{{student.nome}}</span></td>
                <td align="center"><button ng-click="deleteSud(student.Id);" >Delete</button></td>
                <td align="center"><button ng-click="edtSud(student.Id, student.nome);" >Editar</button></td>
		</tr>
    </tbody>
</table>
</div>
<script>
	
var app=angular.module('myApp', []);

app.controller('cntrl', function($scope, $http){

	/****************desabilitanto o id**********************/
	$scope.obj={'idisable':false};
	$scope.btnName="Gravar";

	$scope.inserdata=function(){
	/*****IMPORTANTE ENVIAR VIA POST******/
		$http.post("insert.php", {'id':$scope.id, 'name':$scope.name, 'btnName':$scope.btnName})
		.success(function(){
			
			$scope.id = "";
			$scope.name = "";
			$scope.msg="Dados inseridos com sucesso";
			$scope.displayStud();
			
		})
	
	}
	
	$scope.displayStud=function(){
	/*****IMPORTANTE PEGAR VIA GET******/
		$http.get("select.php")
		.success(function(data){
			$scope.data=data
		})
	}
	
	$scope.deleteSud=function(id){
		/*****IMPORTANTE ENVIAR VIA POST******/
		$http.post("delete.php",{'id':id})
		.success(function(){
			$scope.displayStud();
			$scope.msg="Usuário excluído com sucesso";
		})
	
	}
	
	$scope.edtSud=function(id, nome){
		/*****IMPORTANTE ENVIAR VIA POST******/
		/*$http.post("edt.php",{'id':id, 'nome':nome})
		.success(function(){
			$scope.displayStud();
			$scope.msg="Usuário alterado com sucesso";
		})*/
	
	
		$scope.id=id;
		$scope.name=nome;
		$scope.obj.idisable=true;
		$scope.btnName="Alterar";
		$scope.displayStud();
	
	}

});
	
</script>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

eduardo12fox

ASKER

Thanks! Very, very thanks for help. I´m started learning AngularJs :D

Julian Hansen

You are welcome.