javascript - Angular JS : $routeProvider with dynamic url

标签 javascript angularjs route-provider

我有一个菜单显示用户所属的不同组名称。我准备了一个模板页面,以便当用户选择菜单的 GROUPS 之一时,模板的字段会发生变化。

<li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>Home </a></li>
<li><a data-toggle="collapse" ng-init="getAllGroupsofUser()"data-target="#groups">My Groups</a>
     <ul id="groups" class="collapse">
       <li ng-repeat="group in groupsofUser" ng-controller="groupsCTRL"><a 
           ng-click="openPage(group)">{{group.name}}</a>
        </li>
    </ul>
</li>

组已成功显示在菜单中。 我正在使用 ng-view 和 $routeProvider。

我的 $routeProvider

app.config(['$routeProvider',
   function($routeProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'home.html',
         controller:"MyController"
       })
       .when('/group/:groupname', {
         templateUrl: "groupTemplate.html",
         controller:"groupsCTRL"
       }).
       otherwise({
       redirectTo: '/'
     });
 }]);

我的 Controller

app.controller( 'groupsCTRL',[ '$scope', '$http' , '$location', '$routeParams' ,function($scope, $http,$location,$routeParams){

     $scope.groupeName= $routeParams.groupname;

     $scope.openPage = function(group) {
        $scope.groupselected = group;
          console.log( "group: "+$scope.groupselected.id);
          location.href = "#/group/"+group.name;
    }

}]);

我的模板

<div class="row" >
      <h1 class="page-header">Groupe {{groupeName}} </h1>
</div>
<div class="row">
     {{groupselected.id}}
</div>

我的问题是显示了 groupeName,但是 groupselected.id 只显示在控制台中(因为我使用了 console.log( "group: "+$scope.groupselected.id);)

请帮助我,我需要知道该组是否已传递到页面,因为在下一步中我需要显示有关该选定组的信息。

最佳答案

我通过创建一个新的 RESTful Web 服务来获取按名称分组(因为它是唯一的)解决了我的问题

//get Group by Name 
         $scope.getGroupByName = function(groupname){
              $scope.group=[];
            $http({method: 'GET', url: '/getGroupByName/'+groupname}).
             success(function(result) {
                $scope.group = result.data; 
                    }).
                    error(function(data, status, headers, config) {
                      // called asynchronously if an error occurs
                      // or server returns response with an error status.
                    });
          };

我可以将我的 groupeName 传递给它并获取组

关于javascript - Angular JS : $routeProvider with dynamic url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29680628/

相关文章:

javascript - AngularJS ng-repeat 不重复

javascript - $route 取决于当前 URL ($location)

javascript - 将错误类添加到 selected.js 元素

javascript - 如何使用jquery获取目录中的文件数?

javascript - Firefox 使用 getUserMedia 指定当前窗口进行流式传输

javascript - Angular 将相同的成功和错误函数体应用于不同的 $http 请求

javascript - 在两个选择中设置默认值?

javascript - 如何将 TextToSpeech.talk ("hi' ) 操作添加到按钮

javascript - Angularjs:错误:[ng:areq]参数 'myAppCtrl'不是函数,在将路由与ngRoute和$routeProvider一起使用时未定义

angularjs - 访问routeProvider的路由属性