mercredi 15 juin 2016

How to save data from inputs to array and show them with angularjs

Please, help to create page with two buttons (ADD and SHOW).

Pressing the first button to show the shape of the three inputs (Name, Last Name, e-mail) and button Save.

When you click on Save it should save the data form inputs to the array and clear all inputs. Must also be a check on the validity of the form (all fields are required and check for correct e-mail).

Clicking on the SHOW to appear items that were stored in a form, but only the name, but even when you click on a particular element should jump out pop-up detailed (should include all data from the form (Name, Last Name, e-mail)).

And pagination should be implemented (to the page being displayed item is more than 10).

Sorry for bad english!

<!-- main buttons -->
    <div class="container text-center" ng-app="myApp" ng-controller="Ctrl">

        <button class="btn btn-default" ng-click="myFuncAdd()">ADD</button>
        <button class="btn btn-default" ng-click="myFuncInfo()">SHOW</button>

        <div ng-show="showMeAdd" ng-app="myInputs">

                <p>
                <p>
                    <input class="form-control" type="text" placeholder="Firstname" >
                </p>
                <p>
                    <input class="form-control" type="text" placeholder="Secondname" >
                </p>
                <p>
                    <input class="form-control" type="email" placeholder="Email" >
                </p>
                    <button class="btn btn-default" ng-click="myFuncAddInfo()">Save</button>
                </p>

        </div>

        <div ng-show="showMeInfo">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
<!-- end main buttons -->

<script>
    var myApp = angular.module("myApp", []);
        myApp.controller("Ctrl", function($scope) {
        $scope.showMeAdd = false;
        $scope.showMeInfo = false;
        $scope.myFuncAdd = function() {
            $scope.showMeAdd = !$scope.showMeAdd;
        }
        $scope.myFuncInfo = function() {
            $scope.showMeInfo = !$scope.showMeInfo;
        }
    });


</script> 

Aucun commentaire:

Enregistrer un commentaire