Open data with ng-click from list in ng-repeat

Question

I have an ng-repeat set up showing a list of groups on a page. I would like to click on one of those groups and have the data specific to the clicked group show up on a 'details' page i have already created. I have tried several methods to do this and the farthest I have gotten is not very impressive. Any help would be appreciated.

index.html:

 <div class="containerList">
    <div class="row">
      <div class="col-md-4" ng-repeat="group in data.groups | filter: filterObject | filter: search">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title"><a href="#groupDetail" ng-click="open(group)">{{group.name}}</a></h5>
          </div>
          <div class="panel-body">
            <div class="btn-group">
              <button type="button" class="btn btn-default" >{{group.products}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

groupCtrl:

creativeBillingApp.controller('GroupCtrl', ['$scope', 'groupsService', function( $scope, groupsService, $firebase ) {

$scope.newGroup = {
 name: '',
 status: ''
};

$scope.data = {};
$scope.data.groups = groupsService.getGroups();

$scope.groups = groupsService;

$scope.addGroup = function(newGroup) {

groupsService.addGroup(newGroup);

$scope.newGroup = {
    name: '',
    status: ''
};

};
 $scope.updateGroup = function (id) {
   groupsService.updateGroup(id);
 };

$scope.removeGroup = function(id) {
groupsService.removeGroup(id);
};


$stateProvider
 .state('groupdetail', {
    url                 : '/groupdetail/:id',
    controller          : 'GroupCtrl',
    templateUrl         : 'groupDetails.html'
 })


  $scope.groupId = $stateParams.id; // You will get id, and you can extract data using this id

}])

 .factory('groupsService', ['$firebase', 'FIREBASE_URI',
   function ($firebase, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI + '/groups');

   var groups = $firebase(ref).$asArray();

var getGroups = function(){
  return groups;
};

var addGroup = function (newGroup) {
  console.log(newGroup)
  groups.$add(newGroup);
};

var updateGroup = function (id){
  groups.$save(id);
};

var removeGroup = function (id) {
  groups.$remove(id);
};

return {
  getGroups: getGroups,
  addGroup: addGroup,
  updateGroup: updateGroup,
  removeGroup: removeGroup,
}

}]);

groupDetail.html:

   <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title">
         {{group.name}}
      </h5>
    </div>
   </div>

You want to navigate into a new page? can you console.log(group) inside open to check the handler is working? — Ben Diamant
– Ben Diamant, Commented Dec 11, 2014 at 15:23
Are you trying to move to a new view with details or do you want to open a modal window inside your current view? If the 1st case, then dont use no $scope.open, just navigate to the new view (via a href) and add the info about which group was clicked as url parameter. — Josef Joe Samanek
– Josef Joe Samanek, Commented Dec 11, 2014 at 15:37
I added some more detail to the controller and made some changes/additions based on the answer below. I am trying to open in a new page but am having trouble pulling the data from firebase in. — Lizajean
– Lizajean, Commented Dec 11, 2014 at 16:06

Aditya Sethi · Accepted Answer · 2014-12-11 16:17:47Z

1

You can simply use stateProivder

angular.module('myapp', ['ui.router'])
.config(function ($stateProvider){
    $stateProvider
        .state('groupdetails', {
            url                 : '/groupdetails/:id',
            controller          : 'GroupDetailsCtrl',
            templateUrl         : 'groupDetails.html'
        })
})
.controller("GroupDetailsCtrl", function($firebase, $stateProvider) {
    // now since you are using firebase you need to call service which returns data by id
    firebaseService.getGroup($stateProvider.id).success(function(group) {
        $scope.group = group;
    })
})

I am assuming that you have defined firebase in your firebaseService (Angular Service) and defined methods there to get, save, remove data.

Now in your main html you need to link data-ui-sref

<div class="containerList">
<div class="row">
  <div class="col-md-4" ng-repeat="group in data.groups | filter: filterObject | filter: search">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h5 class="panel-title"><a href="#groupDetail" data-ui-sref="groupdetails({ id: group.id })">{{group.name}}</a></h5>
      </div>
      <div class="panel-body">
        <div class="btn-group">
          <button type="button" class="btn btn-default" >{{group.products}}</button>
        </div>
      </div>
    </div>
  </div>
</div>

So as soon as you click on this link, you will be redirected to a screen with url #/groupdetails/123

Now in your GroupDetailsCtrl, you can extract the data from your groups

$scope.groupId = $stateParams.id; // You will get id, and you can extract data using this id

Make sure you have injected ui.router

Hope this helps :)

edited Dec 11, 2014 at 16:17

answered Dec 11, 2014 at 15:37

Aditya Sethi

10.6k11 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lizajean Over a year ago

I added more detail to my controller. Could you take another look, please?

Lizajean Over a year ago

thank you for replying. Is it necessary I use ui.router I am cuurently just using ngroute and routeProvider... I am also getting this error in the command line: TypeError: Cannot read property 'id' of undefined

Aditya Sethi Over a year ago

If you are using ngRouter then, you just define the routeProvider. Something like this, $routeProvider. when('/groupdetails/:id', { templateUrl: 'groupDetails.html', controller: 'GroupDetailsCtrl' }) and in your controller you need to get this id by $routeParams.id

Collectives™ on Stack Overflow

Open data with ng-click from list in ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related