根据查询字符串参数使用 Angular 填充 select 元素

Question

我需要用从网络 api

检索到的数据填充 select 元素

我为 web 使用属性路由 api

api/project/{pid}/users

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

我需要使用 angular $http.get()

通过查询字符串传递参数

我试过了

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

}

在 fiddler 中出现 404 错误。

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

我阅读了有关 $location.$Search 和 $routParam 的信息，但我需要更多帮助。

Answer 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');
}

Answer 2

"passing pid manually" 是什么意思？

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

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

params 选项会在 url 的末尾添加一个搜索对象，例如

?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;
                    });
            }'

Answer 3

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

Angular 服务：

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

Angular 控制器：

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)">

根据查询字符串参数使用 Angular 填充 select 元素

Fill select element using Angular based on query string parameter

javascript

query-string

asp.net-web-api

angularjs