CODEWITHSUNDEEP
angularjsfirebase
Lucien Dubois
Lucien Dubois

Reputation: 1694

How to link to a single edit page in AngularJs

I am working on a basic AngularJs application to manage a clients list. I currently have a view where I can add and delete clients. I'm would like to create a view where I can edit data.

I'm trying to create the right route to this "single item" view. Here is what I got up to now:

HTML (where I want to put the link)

<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

Upvotes: 0

Views: 714

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598817

You didn't really ask a question. But since your code is missing the part where you assign the object to the detail/client view, I'll focus on that.

In your ClientCtrl you'll simply set up a new reference and sync point for the current client. So something like:

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

Then you can simply bind to the properties in your 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>

And you link to your detail view from clients.html with:

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

All code copied and modified from my pet project here: https://github.com/puf/trenches.

Upvotes: 1

Related Questions