Question

我正在尝试使用angular / nodejs / cloudant构建一个applicationn来执行基本的CRUD函数。我在尝试构建更新操作时遇到了麻烦。我需要以下功能：

当我点击更新（表格中的按钮）时，我需要一个新表格，其中所有细节都根据ID预先填充，以便相应地更新字段。

我正在使用angular路由以传递和检索新表单中的id。但是当我点击更新时，我看不到任何事情发生。我对app开发很新（特别是有角度的）。有人可以帮助我完成执行操作所需的代码更改。

以下是我的代码。

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

CRUD - 将ID传递给新表单以执行更新操作

0 个答案: