如何使用AngularJS从查询字符串中检索值

时间:2015-10-23 03:57:45

标签: javascript jquery angularjs

我在之前的项目中取得了很多进展,需要最后的一些帮助,我似乎无法得到。

我使用需要在页面上填充的所有数据构建我的整个角度控制器,但我需要按照从另一个页面传递的特定值进行过滤。

我决定做查询字符串,但我失去了如何检索我的2个参数,1在本节中使用,1在页面下方进一步使用。我尝试使用jquery url(项目),但在jquery调用中我无法将其连接到角度范围对象。

如何正确使用资源或位置提供程序来完成此任务?

url示例:http://localhost/Client/activitysubpage.asp?activity=6&day=1 注意:在页面的前面我调用了ng-app和ng-controller指令。

我有角度库以及加载的jquery库。 //我抓住了url项目 使用url.js

<script>
        $(document).ready(function () {
           var myactivity =url('?activity');
           var myday = url('?day');
          $scope.currentactivity = myactivity;

//I tried saving the value to a input variable and using ng-bind but it doesnt see the initial value.
// $("#activityitem1").val(myactivity);
        });
                            </script>

<input ng-model="currentactivity" id="activityitem1">
   <h1>NG-MODEL VALUE IS {{currentactivity}}</h1>
 <div class="item item-bg-center-contain">
    <div ng-repeat="items in activities  | filter:{id : myactivity }:true">
          <img ng-src="assets/images/activities/headers/{{items.id}}.jpg" class="img-responsive" style="width:100%;height:auto;" />
    </div>


//controller/instantiation code
 var myapp = angular.module("ActivitySelection", []);


            myapp.controller("ActivityController", function ($scope) {
$scope.shortdates = ["Thursday, January 28","Friday, January 29","Saturday, January 30"];
$scope.currentactivity = 1;
                $scope.activities =
                 [{
    "id":1,
    "title":"Activity1"},

{
    "id":2,
    "title":"Activity2"},
......
{
    "id":8,
    "title":"Activity8"}
];

2 个答案:

答案 0 :(得分:1)

您可以将angularJS的$ location服务用于相同的

$(document).ready(function() {
    $(".testsimonial-content:empty").parent().hide(); 
    // if content is empty - then hide
});

请参阅$location angular docs了解详情

答案 1 :(得分:0)

我刚刚为你创造了一个插件。请仔细阅读。

How to get query string parameters

此示例基于ngRoute angular的默认路由库。如果您需要ui-router示例,请告诉我。

注意:在这个例子中,我使用$ route来获取参数。原因是 $ routeParams仅在路由更改成功完成后更新。这意味着您不能依赖路由解析函数中的$ routeParams正确。相反,您可以使用$ route.current.params来访问新路由的参数。

希望这有帮助!