如何使用 WCF Rest 填充下拉列表 AngularJs

Question

如何使用 WCF Rest 服务填充下拉列表：

首先，这是我获取服务的代码：

service.js

(function (app) {
app.service("GetCategoryService", function ($http) {
    this.GetCategory = function () {
        return $http.get("http://localhost:51458/ServiceRequest.svc/GetCategory/");
    };
});
})(angular.module('entry'));

Entry.Ctrl

(function (app) {
    'use strict';
    app.controller('entryCtrl', entryCtrl);
    entryCtrl.$inject = ['$scope'];

    function entryCtrl($scope) {
        $scope.pageClass = 'page-entry';
        //To Get Category
        $scope.Category = function () {
            var promiseGet = GetCategoryService.GetCategory();
            promiseGet.then(function (pl) { $scope.GetCategory = pl.data },
                  function (errorPl) {
                      console.log('Some Error in Getting Records.', errorPl);
                  });
        }
    }
})(angular.module('entry'));

这是entry.html

<div class="dropdown">
    <select ng-model="Category" ng-options="item.ITEM_TEXT for item in Category"></select>
</div>

WCF 输出 JSON 如： [{"ITEM_TEXT":"INTERNAL APP"},{"ITEM_TEXT":"INTERNAL IT"}]

我不知道如何将它传递给 html，我这样做是行不通的。请帮忙。谢谢

Answer 1

确保您设置的 ng-model 与 array name 不同，同时将服务注入您的控制器，

entryCtrl.$inject = ['$scope', 'GetCategoryService'];

DEMO

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
 
    $scope.Category = [{"ITEM_TEXT":"INTERNAL APP"},{"ITEM_TEXT":"INTERNAL IT"}];
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
   <select ng-model="selected"  ng-init="selected = Category[0]" ng-options="item.ITEM_TEXT for item in Category"></select>
</body>

</html>

如何使用 WCF Rest 填充下拉列表 AngularJs

How to populate dropdownlist using WCF Rest AngularJs

c#

asp.net

wcf-rest

angularjs