CRUD – 将ID传递到新forms以执行更新操作

我正在尝试构build一个应用程序来使用angular / nodejs / cloudant来完成基本的CRUDfunction。 我在尝试构build更新操作时遇到了问题。 我需要以下function:

当我点击更新(表中的button)时,我需要一个新的表单,其中所有的细节,以获得预填充的基础上,使字段可以相应地更新。

我正在使用angular路由为了传递和检索新forms的ID。 但是,当我点击更新,我没有看到任何事情发生。 我对应用程序开发非常陌生(特别是angular度)。 有人可以帮助我执行操作所需的代码更改。

以下是我的代码。

index.HTML :(索引页执行更新操作)

tr ng-repeat="x in myData"> <td><input type="button" value="Update" data-ng-click="update(x.doc._id)" > </td> 

update.js:

 angular.module('CRUDApp', ['formly', 'formlyBootstrap'] ); angular.module('CRUDApp').config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) { $urlMatcherFactoryProvider.strictMode(false) $stateProvider.state('update', { url: '/update/:id', templateUrl: 'public/Views/update.html', }) .state('home', { url: '/home', templateUrl: 'index.html', }) $urlRouterProvider.otherwise('/home'); }); 

update.html(单击更新时的新窗体):

  <!DOCTYPE html> <html> <head> <title>Update iLoad</title> <link rel="stylesheet" type="text/css" href="../stylesheets/add_style.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script> <script src="https://code.angularjs.org/1.4.6/angular-route.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui- router/0.2.8/angular-ui-router.min.js"></script> <link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app="CRUDApp" ng-controller="UpdateController as vm"> <!-- Application Dependencies --> <script src="../../node_modules/api-check/dist/api-check.js"></script> <script src="../../node_modules/angular/angular.js"></script> <script src="../../node_modules/angular-formly/dist/formly.js"></script> <script src="../../node_modules/angular-formly-templates- bootstrap/dist/angular-formly-templates-bootstrap.js"></script> <!-- Controller --> <script src="../scripts/update.js"></script> <script src="../scripts/UpdateController.js"></script> <!-- Application Scripts --> <form add_data> <div class="container col-md-6 col-md-offset-2"> <h1>Update iload</h1> <formly-form model="vm.iload" fields="vm.iloadFields" form="vm.AddForm"> <button type="submit" class="btn btn-primary" ng- disabled="vm.AddForm.$invalid" ng- click="vm.submitform(vm.iload)">Submit</button> </formly-form> </form> </div> </body> </html> 

更新控制器:(获取id来填充表单中的字段):

 (function() { 'use strict'; var app = angular.module('CRUDApp', ['formly', 'formlyBootstrap']); app.controller('UpdateController',UpdateController); function UpdateController($http,$window,$stateParams) { var vm = this; $http.get('/getapi',{params:{data:$stateParams.id} }).then(function(res) { console.log('Success'); $scope.myData = res.data; console.log(res.data);//Just trying to print the id to check if im able to retrieve the right id })