JSFiddle - React, Tailwind, and code Playground

by allen Yu

HTML

<div ng-app="myapp">
  <div ng-controller="mainCtrl">
    <input type="button" value="Save" ng-click="save()" />
    <input type="button" value="Read" ng-click="read()" />
    <input type="button" value="clear" ng-click="clear()" />
    <input type="button" value="default" ng-click="default()" />
    <br>
    <br> Name:
    <input type="text" ng-model='model.name'>
    <br> Tel:
    <input type="text" ng-model='model.tel'>
    <br> 
    <p class="orange">Status:{{status}}</p>
    <hr>
    <pre>{{info | json}}</pre>
  </div>
</div>

CSS

.orange {
  color: orange;
}

JavaScript

angular.module("myapp", [])
  .controller('mainCtrl', ['$scope', '$http', function($scope, $http) {
    var viewModel = function() {
      var self = this;
      self.name = "allen";
      self.tel = "0900123456";
    };

    $scope.model = new viewModel();
    $scope.status = false;
    $scope.selColor = 'green';

    $scope.save = function() {
      var userInfo = $scope.model;
      if (userInfo.tel.match(/^0\d*/)) {
        userInfo.tel = "'" + userInfo.tel;
      }
      $http({
        method: 'POST',
        url: 'https://sheetsu.com/apis/0c7ce378',
        data: userInfo
      }).then(function successCallback(response) {
        $scope.status = response.data.success;
        $scope.read();
      }, function errorCallback(response) {
        $scope.status = response.data.success;
      });
    };

    $scope.read = function() {
      $http({
        method: 'GET',
        url: 'https://sheetsu.com/apis/0c7ce378'
      }).then(function successCallback(response) {
        $scope.info = response.data;
        $scope.status = response.data.success
      }, function errorCallback(response) {
        $scope.status = response.data.success
      });
    };

    $scope.clear = function() {
      $scope.model.name = "";
      $scope.model.tel = "";
    };

    $scope.default = function() {
      $scope.model = new viewModel();
    };

  }]);