Невозможно отобразить данные WEBAPI в директиве повтора Angularjs - PullRequest
Новая
       46

Невозможно отобразить данные WEBAPI в директиве повтора Angularjs

0 голосов
/ 28 февраля 2019

Может ли кто-нибудь помочь с отображением данных webapi в повторяющей директиве angularjs в моем первом приложении Angular?

Я получаю данные из 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>

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Возможны следующие проблемы в вашем коде.

  1. Ваши угловые модули определены как myapp, а в ng-app вы использовали contacts.
  2. Вы должны создатьдве разные переменные области видимости, одна для flavor, а другая - flavors.flavors вам нужно использовать под ng-options и аромат, который вы должны использовать для ng-model.

  3. То, что я понял request.query() вернет объект ресурса, так что есть два варианта, чтобы получитьданные из запроса.Подробнее о ресурсе вы можете узнать здесь 

    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
});
0 голосов
/ 04 марта 2019

Похоже, проблема с именами 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>
0 голосов
/ 28 февраля 2019

Я думаю, что вы близко.исходя из того, что у вас есть, я думаю, что-то вроде этого должно работать: 

<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"}]

вы хотите идентификатор в поле значения, поскольку это бит, который вам нужно знать, какое значение вы выбрали.значение, которое вы видите в раскрывающемся списке, должно быть именем аромата.

когда вы выбираете что-то, это значение будет отражено в модели.

, как я выбрал selectedFlavorId , вы найдете что заполнено под $scope.selectedFlavorId.Не переопределяйте данные API с помощью выбранного значения, как вы только что сделали.

selectedFlavorId даст вам идентификатор выбранного элемента, поэтому после этого вам понадобится немного больше кодаполучить имя этого свойства из вашего массива данных.

...