Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
<div ng-app="myApp" ng-controller="formCtrl">
<form name="controlForm">
    <input class="form-control" type="text" ng-model="contato.nome" name="nome" placeholder="Nome" ng-required="true" ng-minlength="10" />
    <input class="form-control" type="text" ng-model="contato.telefone" name="telefone" placeholder="Telefone" ng-required="true" ng-pattern="/^\d{4,5}-\d{4}$/" />
    <select class="form-control" ng-model="contato.operadora" ng-options="operadora.nome + ' ( ' + (operadora.preco | currency) + ' ) ' for operadora in operadoras | orderBy:'nome'">
        <option value="">Selecione uma Operadora</option>
    </select>
</form>
  <button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="controlForm.$invalid">Adicionar Contato</button>
</div>
  
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
</body>
</html>
 
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
  $scope.operadoras = [
    {
      nome: 'VIVO',
      preco: 1.5
    },
    {
      nome: 'CLARO',
      preco: 1.5
    },
    {
      nome: 'OI',
      preco: 1.5
    }
  ];
  $scope.adicionarContato = function(contato) {
    contato.data = new Date();
    var config = {
      headers : {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
      }
    }
    $http.post("https://requestb.in/151pkra1", contato, config).then(function successCallback(response) {
      console.log(contato);
      delete $scope.contato;
      $scope.controlForm.$setPristine();
    }); 
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers