无法在 Angularjs 重复指令中显示 WEBAPI 数据

Question

有人可以帮助我在第一个 Angular 应用程序中显示 angularjs repeat 指令中的 webapi 数据吗？

我正在从 WEB 获取数据API，如下所示

[{"FLAVOR_ID":"BES","FLAVOR_NAME":"BES"},{"FLAVOR_ID":"BUN","FLAVOR_NAME":"BUN"}]

API 控制器：

public class ItemMaintenanceController : ApiController
    {
        ItemMaintenanceRepository itemRepository;
        public ItemMaintenanceController(ItemMaintenanceRepository _itemRepository)
        {
            itemRepository = _itemRepository;
        }

        [HttpGet]
        public IEnumerable<MA_Flavor> GetAllFlavors()
        {
               return itemRepository.GetAllFlavors();
        }     
    }

Client.html:

<!DOCTYPE html>
<html>
<head>
    <title> Client</title>    
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script>
        alert("start");
        var app = angular.module("myapp", ['ngResource']);

        var controller = function ($scope, $resource) {  // controller uses $resource, which is part of ngResource
            $scope.flavor = {};
            $scope.getFlavors = function () {
                alert("calling getflvors");
                var request = $resource("http://localhost:55762/api/ItemMaintenance/GetAllFlavors?Id=CMN");
                $scope.flavor = request.query();
            };

            ////$scope.clear = function () {
            ////    $scope.flavor = {};
            ////    $scope.error = "";
            ////}

            $scope.getFlavors();
            myapp.controller("ItemMaintenanceController", controller);

  </script>
    </head>
<body ng-app="contacts">
    <div ng-controller="ItemMaintenanceController">    

    <select ng-model="flavor">
        <option ng-repeat="fl in Flavor" value="{{fl.FLAVOR_NAME}}">{{fl.FLAVOR_NAME}}</option>
    </select>

    <h1>You selected: {{flavor.FLAVOR_NAME}}</h1>
</div>
</body>    
</html>

Answer 1

我认为你很接近。根据你所拥有的，我认为这样的事情应该可行：

<select ng-model="selectedFlavorId">
    <option ng-repeat="fl in flavor" value="{{fl.FLAVOR_ID}}">{{fl.FLAVOR_NAME}}</option>
</select>

您的数据在 $scope.flavor 中，我假设如果您进行调试，它将如下所示：

$scope.flavor = [{"FLAVOR_ID":"BES","FLAVOR_NAME":"BES"},{"FLAVOR_ID":"BUN","FLAVOR_NAME":"BUN"}]

您需要值字段中的 id，因为这是您需要知道您 select编辑了哪个值的位。您在下拉列表中看到的值应该是风味的名称。

当您 select 某些东西时，该值将反映在模型中。

因为我选择了 selectedFlavorId，您会发现它填充在 $scope.selectedFlavorId 下。不要像您刚刚那样用 selected 值覆盖您的 API 数据。

selectedFlavorId 将为您提供您 selected 的项目的 ID，因此在此之后您需要更多代码来获取名称属性来自你的数据数组。

Answer 2

您的代码中可能存在以下问题。

你的 angular 模块定义为 myapp 并且你在 ng-app 中使用了 contacts.
您必须创建两个不同的范围变量，一个用于 flavor 另一个是 flavors。 flavors你需要在ng-options下使用 ng-model.

我理解的request.query()会return资源对象，因此有两个选项可以从查询中获取数据。更多细节关于您可以找到的资源 here

var request = $resource("http://localhost:55762/api/ItemMaintenance/GetAllFlavors?Id=CMN");

选项 1

request.query(function(data) {
    $scope.flavor = data;
});

选项 2

request.query().$promise.then(function(data) {
   // success
   $scope.flavor = data;
}, function(errResponse) {
   // fail
});

Answer 3

ng-controller、ng-module 和 ng-app 的名称似乎有问题。尝试改变，希望它能奏效。

<body ng-app="contacts">
    <div ng-controller="ItemMaintenanceController"> 

<Script>
 var app = angular.module('contacts', []);

        // To fetch all falvors 
        app.controller("ItemMaintenanceController", function ($scope, $http) {

.....
...
</script>

无法在 Angularjs 重复指令中显示 WEBAPI 数据

Unable to display WEBAPI data in Angularjs repeat directive

c#

asp.net-mvc

asp.net-web-api

angularjs

angularjs-directive