Saturday, 3 March 2018

Populate (Bind) DropDownList using AngularJS AJAX and JSON

Angular JS 

var AnguarModule = angular.module('CMS', []);
AnguarModule.controller('DashBoard', function ($scope, $http, ApiCall) {
  var result = ApiCall.GetApiCall("MasterDetails", "ASYears").success(function (data) {
        $scope.ASYearsDetails = data;
        $scope.ASYearsD = $scope.ASYearsDetails[0];
    });
});

AngularService

AnguarModule.service('ApiCall', ['$http', function ($http) {
    var result;

    // This is used for calling get methods from web api
    this.GetApiCall = function (controllerName, methodName) {
        result = $http.get(controllerName + '/' + methodName).success(function (data, status) {
            result = (data);

        }).error(function () {
            alert("Something went wrong");
        });
        return result;
    }; 
 

} ]);



HTML: 

 <div class="content" ng-app="CMS">

<div class="col-lg-4  col-md-6" ng-controller="DashBoard">

<select ng-model="ASYearsD" ng-options="items.ASYears for items in ASYearsDetails"
                ng-change="ShowUnfiled()" ng-init="ASYearsD = data[1].AsYr" id="ASYearsD">
                <option value="">-- Select --</option>
            </select>
</div>
</div>


JSON :


[{"AsYr":"2017","ASYears":"2016-17","Selected":"1"},{"AsYr":"2016","ASYears":"2015-16","Selected":"0"},{"AsYr":"2015","ASYears":"2014-15","Selected":"0"},{"AsYr":"2014","ASYears":"2013-14","Selected":"0"},{"AsYr":"2013","ASYears":"2012-13","Selected":"0"},{"AsYr":"2012","ASYears":"2011-12","Selected":"0"},{"AsYr":"2011","ASYears":"2010-11","Selected":"0"},{"AsYr":"2010","ASYears":"2009-10","Selected":"0"},{"AsYr":"2009","ASYears":"2008-09","Selected":"0"},{"AsYr":"2008","ASYears":"2007-08","Selected":"0"},{"AsYr":"2007","ASYears":"2006-07","Selected":"0"}]




No comments:

Post a Comment

Upload valid file in C#

    protected bool CheckFileExtandLength(HttpPostedFile HtmlDocFile)     {         try         {             Dictionary<string, byte[]>...