javascript - 使用 AngularJS 编辑数组中的非字符串对象

Question

我是 AngularJS 的新手，刚刚学习。

问题

我想编辑该列表中的一个 rma。我按下编辑按钮并调用 Controller 函数 updateRma(rma)。按 rma 数字 11 后，我的绝对网址为“http://localhost:8383/RmaClient/app/index.html#/rma-detail/11 ”

1. 我应该更改什么才能使用 rma 对象的正确数据打开 rma-detail.html 页面？现在我总是回到index.html。
2. $location.path('/rma-detail/'+rma);可能是问题所在。如果我去掉“+rma”，我当然可以在没有 rma 数据的情况下纠正 rma-detail 页面。

我从 Java Rest 服务中获得了 rmas 列表，如下所示:

<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>

作为 JSON:

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

查看

<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

            };
     });

服务

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'} }
                    });
        }]);

路由提供者

.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: '/'
  });

});

Glassfish 中的 REST 服务

@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();
}

Answer 1

与其发送整个对象，不如只发送 rma 字段作为 key :

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

更改路由，以便 rma 可以作为参数读取

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

然后在RmaDetailCtrl Controller 中，您可以从路由参数中获取rmaId

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

为了简单的学习目的，不要使用$resource。使用 $http 代替:

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