How to edit input fields using Angularjs?

Question

I have my code that when you click on the "Add User" button a popup window shows up on the screen, and then I can type data in the input fields. After clicking on the "Save" button the data gets displayed on the page (inside of a table). I also have an "Edit" button which allows me to edit those fields. My question is...How to enable the Edit button so that when I click on it I get the popup window back and do the editing from there? this means that when I click on the Edit button I should get the popup with the data I typed in previously. Please someone help me. Thank you so much.

Here's my code:

var App = angular.module('App', ['ui.bootstrap'])

App.controller('mainController', function ($scope, $modal, $log, $filter) {

    $scope.People = [];

    $scope.openPopupScreen = function () {

        var modalInstance = $modal.open({
            template: '<div class="modal-header">   <a class="close" data-dismiss="modal" ng-click="cancel()"><i class="fa fa-times-circle-o" style="margin:10px;color:black;font-size:35px;"></i></a><h1>.</h1></div><div class="modal-body"><form >' +
                ' <label class="col-sm-3 control-label no-padding-right ng-binding">NAME:</label><input style = "width:200px;"type="text" class="form-control ng-scope ng-pristine ng-valid" ng-model="person.name"></br>' +
                ' <label class="col-sm-3 control-label no-padding-right ng-binding">LASTNAME:</label><input style = "width:200px;" type="text" class="form-control ng-scope ng-pristine ng-valid" ng-model="person.Lastname"></br>' +
                ' <label class="col-sm-3 control-label no-padding-right ng-binding">AGE:</label><input style = "width:200px;" type="number"class="form-control ng-scope ng-pristine ng-valid" ng-model="person.age"></br>' +
                ' <button id = "myid" type="button" class="btn btn-success" ng-click="add()"><i class="ace-icon fa fa-check"></i>Save</button>' +
                '  <button type="reset" class="btn ">Clear</button>' +
                ' </form>' +
                '</div>' +
                '<div class="modal-footer">' +
                '  <a data-dismiss="modal" aria-hidden="true" class="btn btn-primary" ng-click="cancel()">close</a>' +
                '</div>',
            controller: ModalInstanceCtrl
        });
        modalInstance.result.then(function (newPerson) {
            $scope.People.push(newPerson);
        });
    };

    var ModalInstanceCtrl = function ($scope, $modalInstance) {
        $scope.person = {
            name: '',
            Lastname: '',
            age: ''
        };


        $scope.ok = function () {
            $modalInstance.close($scope.selected.item);
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };

        $scope.add = function () {
            $modalInstance.close($scope.person);
        };
    };

});

I like jsbin, because I provides lots of fomatting short keys.. — Zohaib Ijaz
– Zohaib Ijaz, Commented Nov 20, 2015 at 23:11

Zohaib Ijaz · Accepted Answer · 2015-11-19 07:39:50Z

3

I have modified your fiddle. and it is working now as you said

http://codepen.io/anon/pen/XmGYaE?editors=001

$scope.editPerson = function(person){
console.log("pr", person);
var modalInstance = $modal.open({
  template: modalTemplate ,
  controller: ModalInstanceCtrl,
  resolve: {
    person: function () {
      return person;
    } 
  }
});

answered Nov 19, 2015 at 7:39

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HenryDev Over a year ago

Thanks a lot for your help!

Sourav Mondal · Accepted Answer · 2015-11-19 08:05:14Z

3

I have modified your(@Zohaib Ijaz) codepen.I do not use editperson function, I am just passing the person value in openPopupScreen and sending the people value through resolve. So we can reuse openPopupScreen function for both cases. I think it is better to reuse a function.

$scope.openPopupScreen = function(people) {

 var modalInstance = $modal.open({
  template: modalTemplate ,
  controller: ModalInstanceCtrl,
  resolve: {
    person: function(){
      return people;
    }
  }
 });
};

answered Nov 19, 2015 at 8:05

Sourav Mondal

4152 silver badges14 bronze badges

1 Comment

HenryDev Over a year ago

Thanks a lot Sourav Mondal

Collectives™ on Stack Overflow

How to edit input fields using Angularjs?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related