How to populate dropdownlist using WCF Rest AngularJs

Question

How to populate dropdownlist using WCF Rest Service:

First, this is my code to get service:

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'));

This is entry.html

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

WCF Output JSON like: [{"ITEM_TEXT":"INTERNAL APP"},{"ITEM_TEXT":"INTERNAL IT"}]

I don't know how to passing this to html, what I'm doing like this is not working. please help. thank

You forgot injecting the service in the controller...Are you getting any specific errors? — deostroll
– deostroll, Commented Dec 14, 2016 at 7:47
Haven't any error. I know this is missing inject to controller. But I don't know how to do it — Stfvns
– Stfvns, Commented Dec 14, 2016 at 7:49
When I add $scope.Category(); in the entryCtrl.js hv errror like GetCategoryService is not defined at ChildScope.$scope.Category — Stfvns
– Stfvns, Commented Dec 14, 2016 at 7:50

Sajeetharan · Accepted Answer · 2016-12-14 08:16:13Z

2

Make sure you have set ng-model different from the array name, also inject the service into your controller,

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>

edited Dec 14, 2016 at 8:16

answered Dec 14, 2016 at 7:50

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sajeetharan Over a year ago

@Stfvns i dont get it

Stfvns Over a year ago

using structure like in entryCtrl.js. When I using like your answer it's not get from my wcf rest service @Sajeetharan

Sajeetharan Over a year ago

just change like this, <select ng-model="selected" ng-init="selected = Category[0]" ng-options="item.ITEM_TEXT for item in GetCategory "></select>

Stfvns Over a year ago

yess. Then I edit my entryCtrl.js entryCtrl.$inject = ['$scope', 'GetCategoryService']; Then it's work

Stfvns Over a year ago

Not helpfull. You don't answer to add entryCtrl.$inject = ['$scope', 'GetCategoryService']; This is important think to work my code

Collectives™ on Stack Overflow

How to populate dropdownlist using WCF Rest AngularJs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related