根据查询字符串参数使用 Angular 填充选择元素答案

【问题标题】：Fill select element using Angular based on query string parameter根据查询字符串参数使用 Angular 填充选择元素
【发布时间】：2015-01-16 10:50:07
【问题描述】：

我需要用从 web api 检索到的数据填充选择元素

我为 web api 使用属性路由

api/project/{pid}/users

如果手动传递参数 pid，它可以正常工作。

我需要使用角度 $http.get() 通过查询字符串传递参数

我试过了

this.getItems = function () {
   return $http({
        url: '/api/project/{pid}/users',
        method: 'GET',
        data: $.param({pid:123})
    });

}

在提琴手我得到 404 错误。

http://localhost/api/project/%7Bpid%7D/users

我了解了 $location.$Search 和 $routParam，但我需要更多帮助。

【问题讨论】：

标签： javascript angularjs query-string asp.net-web-api

【解决方案1】：

Angular 不会像在视图中那样解析字符串并替换 {pid}，所以你可以简单地这样做：

this.getItems = function () {
   return $http({
        url: '/api/project/' + pid + '/users',
        method: 'GET'
    });
}

甚至更短：

this.getItems = function () {
   return $http.get('/api/project/' + pid + '/users');
}

【讨论】：

好的，当我手动传递pid时它可以工作。但是如何从查询字符串中捕获 pid 呢？我假设我需要在角度控制器中执行此操作？
我认为您需要更详细地解释一下“从查询字符串中捕获 pid”的含义。
就是这样。我使用 $location 服务从查询字符串中获取 pid。 var pid= $location.search(); 和上面的代码。 Tnx

【解决方案2】：

当用户在选择元素中选择确切的选项时，我需要调用控制器函数。

角度服务：

dataFactory.getUsers = function (pid) {
            return $http.get(urlBase + 'api/projects/project/' + pid +'/users');

角度控制器：

function getUsers(pid) {
                dataFactory.getUsers(pid)
                    .success(function (user) {
                        $scope.users = user;
                    })
                    .error(function (error) {
                        $scope.status = error.message;
                    });
            }'

HTML：

<select ng-model="user" ng-options="item.id as item.name for item in users" ng-click="getUsers(pid)">

【讨论】：

【解决方案3】：

“手动传递 pid”是什么意思？

我怀疑您的 html 中有类似 ng-click="getItems()" 的内容。您可以将其更改为 ng-click="getItems(pid)" 并将其传递给您的函数

this.getItems = function (pid) {
   return $http.get('/api/project/' + pid + '/users');
}

params 选项会将搜索对象添加到您的网址末尾，例如

?users=jondoe

更新

看看你的新代码，一切看起来都不错。但是在你的 HTML 中它应该是

<select ng-model="user" ng-options="item.id as item.name for item in users" ng-click="getUsers(item.id)">

另外，函数应该是

$scope.getUsers(pid) {
                dataFactory.getUsers(pid)
                    .success(function (user) {
                        $scope.users = user;
                    })
                    .error(function (error) {
                        $scope.status = error.message;
                    });
            }'

【讨论】：

"手动传递 pid" = 硬编码 :) 我在 HTML 中有选择元素。我想在更改事件上调用函数并从查询字符串中传递 pid 参数。
好的。然后试着用你的 ng-click 传递它，如上所示。
如果 pid 随着用户输入而改变，你可以使用 ng-change。你能提供一个你的代码的jsfiddle吗？