0

我是 AngularJs 和 MongoDb 世界的初学者（我今天开始学习！！）

实际上我正在尝试做一些非常基本的事情：显示一个记录列表，每个记录都有一个添加按钮和一个编辑链接。

我正在使用这个库https://github.com/pkozlowski-opensource/angularjs-mongolab连接到 mongoweb。

实际上，我的数据已显示，当我尝试添加记录时它可以工作，但问题是当我尝试显示编辑表单时！

这是我的 index.html 文件，我在其中显示了带有添加记录的表单和编辑链接的数据：

<div ng-controller="AppCtrl">
    <ul>
        <li ng-repeat="team in teams">
            {{team.name}} 
            {{team.description}}
            <a href="edit.html?id={{team._id.$oid}}">edit</a>
        </li>
    </ul>

    <form ng-submit="addTeam()">
        <input type="text" ng-model="team.name"  size="30" placeholder="add new team here">
        <input type="text" ng-model="team.description"  size="30" placeholder="add new team here">
        <input class="btn-primary" type="submit" value="add">
      </form>
</div>

这是我的 edit.html 代码，它显示了一个编辑表单：

<div ng-controller="EditCtrl">

    <form ng-submit="editTeam()">
        <input type="text" name="name" ng-model="team.name"  size="30" placeholder="edit team here">
        <input type="text" name="description" ng-model="team.description"  size="30" placeholder="edit team here">
        <input class="btn-primary" type="submit" value="validate edit">
      </form>
</div>

最后是我的js代码：

var app = angular.module('app', ['mongolabResource']);

app.constant('API_KEY', '____________________________');
app.constant('DB_NAME', 'groups');

app.factory('Teams', function ($mongolabResource) {
    return $mongolabResource('teams');
});

app.controller('AppCtrl', function ($scope, Teams) {
    $scope.teams = Teams.query();
    $scope.addTeam = function() {
        varteam = {
            name: $scope.team.name, 
            description: $scope.team.description
        };
        $scope.teams.push(varteam);
        Teams.save($scope.team);
        $scope.team.name = '';
        $scope.team.description = '';
    };

});

app.controller('EditCtrl', function ($scope, Teams) {
    //????????
});

我的 AppCtrl 工作完美，它完美地显示了添加记录的数据。

现在我想为编辑添加 js 代码，但我什至不知道从哪里开始？ia 如何获取 url 中的 id 参数？我如何告诉视图从数据库中的值填写表单字段？最后我如何更新数据库。

我知道我问了很多问题，但我真的迷路了！谢谢你

4

1 回答 1

0

当然有很多可能的解决方案。

一种解决方案是使用 angularjs 路由。有关教程，请参阅http://docs.angularjs.org/tutorial/step_07。

基本上用类似的东西替换你的 ul 列表：

<ul>
    <li ng-repeat="team in teams">
        {{team.name}} 
        {{team.description}}
        <a href="#teams/{{team._id.$oid}}">edit</a>
    </li>
</ul>

然后，您可以创建一个响应您的 url 的路由：

yourApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/teams', {
        templateUrl: 'partials/team-list.html',
        controller: 'TeamListCtrl'
      }).
      when('/teams/:teamId', {
        templateUrl: 'partials/team-detail.html',
        controller: 'TeamDetailCtrl'
      }).
      otherwise({
        redirectTo: '/teams'
      });
  }]);

通过这种方式，从详细控制器（将替换您的 EditCtrl）中，您可以使用以下命令访问 id 参数：$routeParams.teamId

无论如何，我建议好好学习所有教程以获得更好的概述。

于 2013-10-13T08:35:43.077 回答