Editing not string-object in array with AngularJS

Question

I am totally newbe in AngularJS, just learning.

Question

I would like to edit one rma in that list. I press the edit-button and call the controller funtcion updateRma(rma). After pressing rma number 11 my absolute url is "http://localhost:8383/RmaClient/app/index.html#/rma-detail/11"

What should I change to get my rma-detail.html page open with correct data of rma object? Now I am always back in index.html.
$location.path('/rma-detail/'+rma); could be the problem. If I take "+rma" off, I can get to correct rma-detail page without rma's data of course.

I have got a list of rmas from Java Rest service like that:

<rmas>
<rma>
<an8>22</an8>
<created>2012-02-28T19:28:54+02:00</created>
<dsc1>dsc1</dsc1>
<dsc2>dsc2</dsc2>
<rma>1</rma>
<sarjanro>serial</sarjanro>
<shortdesc>shortdesc</shortdesc>
<tuotenro>tuotenro</tuotenro>
<user>USER</user>
</rma>
</rmas>

as a JSON:

an8: 22,
created: "2012-02-28T19:28:54",
dsc1: "dsc1",
dsc2: "dsc2",
rma: 1,
sarjanro: "serial",
shortdesc: "shortdesc",
tuotenro: "tuotenro",
user: "USER"

VIEW

<tbody>
        <tr ng-repeat="rma in rmas">
            <td>{{ rma.rma}}</td>
            <td>{{ rma.sarjanro }}</td>
            <td>{{ rma.an8}}</td>
            <td>{{ rma.user }}</td>
            <td>{{ rma.created}}</td>
            <td>{{ rma.tuotenro }}</td>
            <td><a ng-click="updateRma(rma)" class="btn btn-small btn-success">edit</a></td>
            <td><a ng-click="deleteRma(rma.rma)" class="btn btn-small btn-danger">delete</a></td>
        </tr>
    </tbody>

CONTROLLER

  angular.module('rmaClientApp')
     .controller('RmaListCtrl', function ($scope, $location, rmaService) {        
            $scope.rmas = rmaService.query();
            /* callback for ng-click 'updateRMA': */
            $scope.updateRma = function (rma) {
                $location.path('/rma-detail/'+rma);
                console.log("2. ABSURL---->" +$location.absUrl());
                // ABSURL---->http://localhost:8383/RmaClient/app/index.html#/rma-detail/%5Bobject%20Object%5D

            };
     });

Service

angular.module('rmaServices', ['ngResource'])
    .factory('rmaService', ['$resource',
        function ($resource) {
            return $resource(
                    'http://localhost:8080/Rma/webresources/com.demo.rma.rma/:rma:id',
                    {},
                    {
                        update: { method: 'PUT', params: {id: '@rma'} }
                    });
        }]);

ROUTEPROVIDER

.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .when('/rma-list', {
    templateUrl: 'views/rma-list.html',
    controller: 'RmaListCtrl'
  })
  .when('/rma-detail', {
    templateUrl: 'views/rma-detail.html',
    controller: 'RmaDetailCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });

});

REST services in Glassfish

@GET
@Path("{id}")
@Produces({"application/json"})
public Rma find(@PathParam("id") Integer id) {
    return super.find(id);
}

@GET
@Override
@Produces({"application/json"})
public List<Rma> findAll() {
    return super.findAll();
}

Can you post the code for routeProvider and the detail controllers too? — Huy Hoang Pham
– Huy Hoang Pham, Commented Mar 23, 2015 at 8:59
I updated the answer, you have to change the route provider too. — Huy Hoang Pham
– Huy Hoang Pham, Commented Mar 23, 2015 at 9:06

Huy Hoang Pham · Accepted Answer · 2015-03-23 09:37:30Z

1

Instead of sending the entire object, how about just sending the rma field as a key:

$location.path('/rma-detail/'+rma.rma);
//http://localhost:8383/RmaClient/app/index.html#/rma-detail/1

Change the routing so that the rma can be read as a param

.when('/rma-detail/:rmaId', {
templateUrl: 'views/rma-detail.html',
controller: 'RmaDetailCtrl'
})

Then in the RmaDetailCtrl controller, you can get the rmaId from route params

//Remember to inject the $routeParams in controller's constructor
var rma = $routeParams.rmaId; //1
//Call the get rma detail from API

For simple learning purpose, don't use $resource. Use $http instead:

var rma = $routeParams.rmaId; //1
$http.get('/Rma/webresources/com.demo.rma.rma/?id=' + rma).success(function(result) {
    console.log(result);
});

//Use $http.get for update

edited Mar 23, 2015 at 9:37

answered Mar 23, 2015 at 8:39

Huy Hoang Pham

4,1471 gold badge19 silver badges28 bronze badges

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

2 Comments

Sami Over a year ago

If I add rma.rma my absolute path is like that: localhost:8383/RmaClient/app/index.html#/rma-detail/undefined and in my detail controller i've got: if ($scope.editMode) { $scope.rma = rmaService.get({id: $routeParams.id}); It never goes to detail-page, it goes always to index-page.

Sami Over a year ago

That was it. Now it is working. Thank you guys mohamedrias and @Huy Hoang Pham. The main mistake was incorrect routingprovider. .when('/rma-detail/:id' is correct and in controller: $scope.rma = rmaService.get({id: $routeParams.id});

Collectives™ on Stack Overflow

Editing not string-object in array with AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related