How To Edit Angularjs Template

Single Page Application edit view in AngularJS

How to create edit view of Sinlge Page Application in AngularJS?

In previoust mail service, we learnt how to create details view and delete record in Single Page Awarding. In this post, we shall acquire how to edit / update record in Single Folio Application.

Pre-requisite: It is of import to go through previous posts before reading this mail service to empathize this completely.

Single Page Application edit and update

Single Page Application Edit view - view code

Beneath code snippet is about similar to the Create view, however on ng-submit, we are calling Update() role of the corresponding controller.

<h1>{{Title}}</h1><form ng-submit="Update()">
    <div class="class-horizontal">
        <hr />
                  <div class="grade-group">
            <label grade="command-label col-md-two">Beginning Proper name</label>
            <div class="col-md-10">
                <input type="text" name="FirstName" required grade="form-control" ng-model="firstName" />
            </div>
        </div>
                  <div class="form-group">
            <label class="command-label col-doctor-two">Last Proper noun</label>
            <div class="col-doctor-10">
                <input type="text" name="LastName" required grade="form-control" ng-model="lastName" />
            </div>
        </div>
        <div class="form-group">
            <characterization class="control-label col-physician-2">Age</characterization>
            <div grade="col-md-10">
                <input blazon="number" name="Historic period" required class="class-control" ng-model="age" />
            </div>
        </div>
        <div class="form-group">
            <label course="control-label col-doc-2">Agile</label>
            <div class="col-md-10">
                <input type="checkbox" name="Active" value="true" ng-model="active" /> Yes
            </div>
        </div>
                  <div class="grade-group">
            <div class="col-md-beginning-ii col-md-10">
                <input blazon="submit" value="Update" class="btn btn-default" />            
                <span form="text-success">{{UpdateMessage}}</span>
            </div>
        </div>
    </div>
</class>
<hr />
<div><a href="#/PD">Back to List</a></div>

Single Page Application Edit view - controller code

// PD - Edit - PersonalDetails controller
app.controller("PDControllerEdit", function ($scope, PDService, $routeParams, $rootScope) {
    $scope.Title = "Edit - Personal Details";
    $scope.RecordToEdit = $routeParams.id; // go the parameter    $rootScope.loading = truthful;
    $scope.GetSingle            = PDService.GetSingle($routeParams.id).then(function (d) {
        $telescopic.firstName = d.FirstName;
        $scope.lastName = d.LastName;
        $scope.age = d.Age;
        $telescopic.active = d.Active;
        $rootScope.loading = faux;
    });
              $telescopic.Update            = function () {
        $rootScope.loading = truthful;
        PDService.Update($telescopic.RecordToEdit, $telescopic.firstName, $scope.lastName, $scope.age, $scope.active).then(function (d) {
            $scope.UpdateMessage = d;
            $rootScope.loading = false;
        });
    };
});

In this controller, nosotros have get-go prepare the $telescopic.RecordToEdit property to the value of $routeParams.id, read more most $routeParams in this post. Observe the URL of the browser in the movie to a higher place, information technology is "http://localhost:61275/SPA/#/PD/Edit/v" where :id is 5. $scope.RecordToEdit volition be used to retrieve and update the record (this being the primary central in the database for this record).

In the above controller we have ii functions

GetSingle - Using the $routeParams.id we are getting the single record from the database as we have got in the details view and setting the $scope properties to corresponding ng-model $scope properties that shows the existing value of that record into the text boxes.
Update - When user clicks on Update, it calls the Update function of the $http service divers as part of this Single Page Application that updates the record into the database and gives update message that is intern set to the $scope property.

In both cases we take set the $telescopic.loading holding to false to hibernate the "Loading ...." notification message as in the commencement of the controller nosotros had set information technology to true.

Feel costless todownload the source code from dwelling house page of Single Page Application footstep by footstep tutorials and use information technology.

Views: 17033 | Post Gild: 78