Question

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

我正按预期从WEBAPI获取数据

[{"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，因为这是您需要知道选择哪个值的位。您在下拉列表中看到的值应该是风味的名称。

选择某项时，该值将反映在模型中。

当我选择 selectedFlavorId 时，您会发现它位于$scope.selectedFlavorId下。不要像刚刚那样用选定的值覆盖API数据。

selectedFlavorId 将为您提供所选项目的ID，因此您需要更多代码才能从数据数组中获取该属性的名称。

Answer 2

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

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

我了解的request.query()将返回资源对象，因此，有两个选项可从查询中获取数据。有关的更多详细信息您可以找到的资源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数据

3 个答案: