How to get edited value from textfield to pass it to server - angularjs

Question

I am new to AngularJS. I have a problem with ng-model.

In one of my pages I have a list view. Each list can be deleted or it can be edited. What I need is when I click the edit button, I have to pass the particular list values to another controller and it should be shown in a separate textfields. In this new controller I have an update button, so that if any changes in the textfield can be sent to server. Problem is ng-model is not working as I am showing the list values as value="{{list.name}}". Below is my full code.

From my first controller I am passing values to next by this method:

$scope.edit = function(item) {    
    $state.go('app.editemployer',{emp : item.emp_id,empname: item.emp_name,empcontact: item.emp_contact,companyname: item.comp_name,mobile: item.mobile,address: item.address1,addre: item.address2,city: item.city,states: item.state,postcode: item.zipcode,username: item.username,pass: item.password,email: item.emailid});
};

Then in my app.js as follows:

.state('app.editemployer', {
    url: "/editemployer/:emp/:empname/:empcontact/:companyname/:mobile/:address/:addre/:city/:states/:postcode/:username/:pass/:email",
    views: {
      'menuContent': {
        templateUrl: "templates/editemployer.html",
         controller: 'editemployersCtrl'
      }
    }
  })

Then in editemployer.html page I am showing the values in textfield like below:

<form class="form-horizontal" >
    <div class="form-group" >
    <label for="inputEmail" class="control-label col-xs-6">
        EMPLOYER NAME</label>
        <div class="col-xs-6">
            <p class="form-control-static"><input type="text" value="{{name}}" ng-model="data.name"></p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="control-label col-xs-6">EMPLOYER CONTACT</label>
        <div class="col-xs-6">
            <p class="form-control-static"><input type="text" value="{{contact}}" ng-model="data.contact"></p>
        </div>
    </div>
</form>

Then in editemployersCtrl controller.js as follows:

.controller('editemployersCtrl',function($scope,$http,$ionicLoading,$state)
{        
    $scope.emp=$state.params.emp;
    $scope.name =$state.params.empname;
    $scope.contact =$state.params.empcontact;
    $scope.cmpname =$state.params.companyname;
}

What I am getting after selecting edit button is, wherever I used ng-model, those textfields values are becoming empty and not showing inside it. I need it to show in the textfield, edit it and pass to server.

You shouldn't pass all of those parameters in the url. Look at this answer as an example: http://stackoverflow.com/a/29792020/1636157 — DerekMT12, Jul 12 '16 at 13:56
You can pass state params without including them in the url. You just have to list them out with an initial value in your `.state` definition (see link provided by DerekMT12 above). Also, try injecting `$stateParams` and accessing params via that service instead of `$state.params`. I'm pretty sure that service does a better job of resolving params. Speaking of services, an even better option might be to use a service to hold on to those values while switching states. — mikkelrd, Jul 12 '16 at 14:25

How to get edited value from textfield to pass it to server - angularjs

0 Answers0