CODEWITHSUNDEEP
javascriptangularjsformsscope
Anand Kadhi
Anand Kadhi

Reputation: 1878

Not able to pre-populate a form in AngularJS

I am a newbie in angular and facing a problem of prepopulating a form using an object.
For example , i have

  1. Page A have a with form for new employee information .
  2. Page B displays list of all existing employees information in tabular form and when user clicks on any employee row i redirect to Page A with pre-populated form fields for editing.

    Both pages use the same controller.
<form name="empForm">
        <div style="margin: 21px 10px 0px 10px;">
            <label style="margin-right: 36px;">Employee Name:</label> <input
                type="text" class="text-width text-color" ng-model="emp.fName"
                placeholder="Employee Name">
        </div>
        <div align="center">
                <button class="btn btn-default" ng-click="submitCorePack(emp)">Submit</button>
        </div>
</form>

When filling up the information and submitting the form i get the information in emp object and i am able to fetch all information from that object. On page B i display list of registered employees like 

<tr ng-repeat="employee in employeelist" ng-click="viewEmployee(employee)">
                    <td>{{$index + 1}}</td>
                    <td>{{employee.fName}}</td>                                                             
                </tr>

and when user clicks on any row i pass the employee object to a function which does the page redirecting and form field pre-populating.

                        $scope.viewEmployee=function(employee){
                            $scope.emp.fName=employee.fName;
                            $scope.go(); // Redirect to Page A
                        }

But i get $scope.emp.fName undefined, how to solve this problem , how to get this form field populated , please help.

Upvotes: 0

Views: 978

Answers (2)

Prasad
Prasad

Reputation: 1600

With the code you Provided it is bit hard to guess and fix the issue so iam just posting some Quick options

Inject $rootScope to Controller . Change your code to

$scope.viewEmployee=function(employee){
         $rootScope.emp=employee;//Save whole obj where you can play with that.              $scope.go(); // Redirect to Page A
                                       }

Or Option2 :- WindowslocalStorage

window.localStorage.employee = employee; // check it in developer Tools --> resources -->LocalStorage(click on your Domain)

Or Option3 :- install local storage Plugin :-

https://github.com/gsklee/ngStorage

inject to the controller ,

  $localStorageProvider.get('MyKey');
  $localStorageProvider.set('MyKey', { k: 'value' });

Upvotes: 2

MBN
MBN

Reputation: 1006

U must define $scope.emp:

 $scope.viewEmployee=function(employee){
      $scope.emp = employee;
      $scope.go(); // Redirect to Page A
 }

Or:

$scope.emp = {};
$scope.viewEmployee=function(employee){
      $scope.emp.fName=employee.fName;
      $scope.go(); // Redirect to Page A
}

Upvotes: 1

Related Questions