Question

我有一个ng-repeat设置，显示页面上的组列表。我想点击其中一个组，并将特定于所点击组的数据显示在我已创建的“详细信息”页面上。我已经尝试了几种方法来做到这一点，我得到的最远的并不是很令人印象深刻。任何帮助将不胜感激。

的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>

Answer 1

您可以简单地使用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;
    })
})

我假设您已在firebaseService（Angular Service）中定义了firebase，并在那里定义了获取，保存，删除数据的方法。

现在在主html中，您需要关联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>

因此，只要您点击此链接，您就会被重定向到包含网址#/groupdetails/123

的屏幕

现在，在您的GroupDetailsCtrl中，您可以从groups

中提取数据

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

确保您已注入ui.router

希望这会有所帮助：）

在ng-repeat中使用ng-click打开数据

1 个答案: