Question

我正在开发一个基本的AngularJs应用程序来管理客户列表。我目前有一个视图，我可以添加和删除客户端。我想创建一个可以编辑数据的视图。

我正在尝试创建通往此“单项”视图的正确路径。以下是我现在所做的事情：

HTML （我想把链接放在哪里）

<table class="table table-hover">
  <tr><th>Prénom</th><th>Nom</th><th>Modifier</th><th>Supprimer</th></tr>
  <tr ng-repeat="client in clients">
      <td><a href="{{client.$id}}">{{client.prenom}}</a></td>
      <td>{{client.nom}}</td>
  </tr>
</table>

的Javascript

var app = angular.module("crmfirebase", [
    "ngCookies",
    "ngResource",
    "ngSanitize",
    "ngRoute",
    "firebase"
    ]);

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'accueil.html'
      }).
      when('/clients', {
        templateUrl: 'clients.html',
        controller: 'ClientsCtrl'
      }).
      when('/clients/:clientId', {
        templateUrl: 'client.html',
        controller: 'ClientsCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

app.value('fbURL', 'https://mydatabaseurl.firebaseio.com/clients');

app.controller('ClientsCtrl', function ($scope, fbURL, $firebase) {

  var ref = new Firebase("https://mydatabaseurl.firebaseio.com/clients");
  $scope.clients = $firebase(ref).$asArray();

  $scope.removeClient = function(client) {
    $scope.clients.$remove(client);
  };

  $scope.addClient = function (client) {
    $scope.clients.$add(client);
  };

  $scope.updateClient = function (client) {
    $scope.clients.$save(client);
  };

}); //End Controller

Answer 1

你真的不问一个问题。但是，由于您的代码缺少将对象分配给详细信息/客户端视图的部分，因此我将重点介绍它。

在ClientCtrl中，您只需为当前客户端设置新的引用和同步点。如下所示：

app.controller('ClientCtrl', function($scope, FBURL, $firebase, $routeParams) {
    $scope.boardId = board.id;
    var ref = new Firebase(FBURL+"clients/"+$routeParams.clientId);

    var client= $firebase(ref).$asObject();
    client.$bindTo($scope, 'client');
});

然后您只需绑定到client.html中的属性：

<h2><a href='#/board/{{client.$id}}'>{{client.name}}</a></h2>
<article ng-controller='ClientCtrl' ng-model='client'>
    <label>Name: </label><input ng-model='client.name' autofocus></input>
    <label>Age: </label><input ng-model='client.age'></input>
    <button ng-click='removeClient(client.$id)'>Delete</button>
</article>

您可以使用以下链接从clients.html链接到您的详细信息视图：

 <td><a href="#/client/{{client.$id}}">{{client.prenom}}</a></td>

从我的宠物项目中复制和修改所有代码：https://github.com/puf/trenches。

如何链接到AngularJs中的单个编辑页面

1 个答案: