JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div class="panel panel-default" ng-controller="UnitOfMeasureController as uom">
    <div class="panel-heading">
         <h3 class="panel-title">Create new Unit of Measure</h3>

    </div>
    <div class="panel-body">
        <div ng-hide="uom.processing">
            <form ng-submit="uom.processForm()" id="new_uom_form">
                <div class="form-group">
                    <label for="uom_input01">Name</label>
                    <input ng-model="uom.formData['name']" type="text" class="form-control" id="uom_input01" placeholder="" name="uom[input01]" value="{{\xsds::old('uom.input01',$values)}}">
                </div>
                <div style="text-align:right">
                    <button type="submit" class="btn btn-primary"><i class="fa fa-plus-square"></i> Create new Unit of Measure</button>
                </div>
            </form>
        </div>{!!\xsds::angularLoader('ng-show="uom.processing"')!!}</div>
    <button ng-click="uom.processing = !uom.processing">Toggle</button>
    <%uom.processing%>
</div>

JavaScript

var app = angular.module('ingredients', [], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});


app.controller('UnitOfMeasureController', ['$scope', '$http', function ($scope, $http) {
    formData = [];
    this.processing = false;
    this.processForm = function () {
        this.processing = true;
        
        var onSuccess = function (data, status, headers, config) {
            /* $scope.$apply(function(){
              $scope.processing = false;
            });*/
            //console.log($scope.processing);
            console.log(this.processing);
            //console.log($scope);

            this.processing = false;
            /*if (!data.success) {
                console.log(data.errors);
            } else {*/
            console.log('success', data);
            //}

            //$scope.$digest();
            //$scope.$apply(); similar but slower
            /*  $scope.$apply(function() {
              $scope.processing = false;
            });*/
        };
        
        var onError = function (data, status, headers, config) {
            this.processing = false;
            if (document.is_js_dev) {
                alert(status + ' ');
            }
        };
        
        $http.jsonp('http://www.mocky.io/v2/5568b30150223de60c64f24f/?callback=JSON_CALLBACK').//document.js_root + '/recipe/ingredients/uom/ajax-create').
        success(onSuccess.bind(this)).
        error(onError.bind(this));

        return false;
    };
}]);