使用 AngularJS 使用 WebApi答案

【问题标题】：Consume WebApi with AngularJS使用 AngularJS 使用 WebApi
【发布时间】：2014-08-24 12:42:00
【问题描述】：

我从 AngularJS 开始，我做了这个例子：

一个简单的html文件：

<!DOCTYPE html>
<html ng-app="app" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>First Demo</title>
</head>
    <body>
        <div ng-controller="prdController">
            <div>
                <h2>All Products - With Angular</h2>
                <ul>
                    <li ng-repeat="product in products">
                        {{ formatItem(product) }}
                    </li>
                </ul>
            </div>
            <div>
                <h2>Search by ID</h2>
                <input type="text" ng-model="prodId" size="5" />
                <input type="button" value="Search" ng-click="find(prodId);" />
            </div>
            <strong ng-show="loading">loading..</strong>
            <strong>{{ error }}</strong>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
        <script src="ProductController.js"></script>
    </body>
</html>

我有这个控制器：

(function () {
    var uri = '/demo.WebApi/api/products';
    var app = angular.module('app',[]);

    app.controller('prdController', function ($scope, $http) {
        //debugger;
        $scope.loading = true;
        $scope.products = [];
        //$scope.prodId = 0;
        $scope.error = '';

        $http.get(uri)
            .success(function (data) {
                $scope.products = data;
                $scope.loading = false;
            })
            .error(function () {
                $scope.error = "An Error has occured while loading posts!";
                $scope.loading = false;
        });

        $scope.formatItem = function (item) {
            //debugger;
            return item.Name + ': $' + item.Price;
        }

        $scope.find = function (id) {
            debugger;
            $scope.loading = true;
            $http.get(uri + '/' + id)
            .success(function (data) {
                debugger;
                $scope.products = [];
                $scope.products = data;
                $scope.loading = false;
            })
            .error(function () {
                $scope.error = "An Error has occured while loading posts!";
                $scope.loading = false;
            });
        };
    });
})();

$http.get 方法效果很好，我可以得到我的产品列表。在我的 html 页面中，我看到了格式化的产品列表：

Tomato Soup: $1
Yo-yo: $3.75
Hammer: $16.99

但是当我尝试搜索一个产品时，在输入文本 prodId 中输入一个 ID，我看不到该产品。我可以看到与我的产品值一起返回的数据，但它无法在我的页面中呈现。列表如下图所示：

undefined: $undefined
undefined: $undefined
undefined: $undefined
undefined: $undefined

我得到了第一个列表的 3 行，再加上我搜索的产品的一行。

我做错了什么？

谢谢，马塞洛。

【问题讨论】：

你能显示你的 Web API 方法的签名吗？ URL 结构可能会根据您定义的参数而有所不同。

标签： angularjs asp.net-web-api

【解决方案1】：

GET by ID 是返回一个包含单个对象项还是一个对象的数组？

我怀疑错误在于它返回单个对象，因此当您将返回数据分配给 $scope.products 时：

$scope.products = [];
$scope.products = data;

products 不再是一个数组。 ng-repeat 也接受对象集合，我猜你看到的未定义输出是每个键传递给 formatItem 函数的结果。尝试将以上内容更改为：

$scope.products = [data];

如果数据是一个数组，那么肯定还有另一个问题。

【讨论】：