CODEWITHSUNDEEP
jqueryangularjsasp.net-mvc-4
Nayeem Mansoori
Nayeem Mansoori

Reputation: 831

How to return Ajax call value in angularjs $scope and bind it to ng-repeat

i'm trying to return ajax call value put in $scope in angular js but getting nothing idon't what happing here can you please check my code which i write below are the code 

function GetDataarray() {
        var jqxhr = $.ajax({
            type: 'GET',
            url: '@Url.Content("~/Home/GetPesrons")',
            data: '{}',
            dataType: 'json',
            success: function (data, textStatus, XMLHttpRequest) {
                //alert(JSON.stringify(data));
                return JSON.stringify(data);
            }
        });
    }

 var app = angular.module('Napp', []);
app.controller('GetAlphabetical', function ($scope) {

    $scope.filt = 'All';
    $scope.setFilter = function (letter) {
        $scope.filt = letter;
    };

    $scope.names = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    $scope.startsWith = function (customer) {
        var lowerStr = (customer.Name + "").toLowerCase();
        var letter = $scope.filt;
        if (letter === 'All') return true;
        return lowerStr.indexOf(letter.toLowerCase()) === 0;
    }

    $scope.Customer = GetDataarray();

});

And Html is here :

<div data-ng-app="Napp" ng-controller="GetAlphabetical">
Search : 
<input type="text" ng-model="txtsearch" />
<table>
    <tr>
        <td ng-repeat="letter in names">&nbsp;<span ng-click="setFilter(letter)">{{letter}}</span>|</td>
    </tr>
</table>
<br />
<ul>
    <li ng-repeat="cust in Customer | filter:startsWith | orderBy: 'Name' | filter : txtsearch">{{cust.Name}}</li>
</ul>

Upvotes: 0

Views: 4248

Answers (2)

Anil Sharma
Anil Sharma

Reputation: 2962

Angular data binding will not work the way you are using it . Please don't mix jquery and angular. So take a look at $http service(xhr service of angular) .

below is sample get call . So either put it in your controller or in your factory service . 

// Simple GET request example :
 $http.get('/someUrl').
  then(function(response) {
  // this callback will be called asynchronously
   // when the response is available
  }, function(response) {
   // called asynchronously if an error occurs
   // or server returns response with an error status.
  });

In your controller add this 

 var app = angular.module('Napp', []);
app.controller('GetAlphabetical', function ($scope, $http) {

    $scope.filt = 'All';

    $scope.setFilter = function (letter) {
        $scope.filt = letter;
    };

    $scope.names = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    $scope.startsWith = function (customer) {
        var lowerStr = (customer.Name + "").toLowerCase();
        var letter = $scope.filt;
        if (letter === 'All') return true;
        return lowerStr.indexOf(letter.toLowerCase()) === 0;
    }

    function getCutomers() {
        $http.get('Home/GetPesrons').then(function (response) {
            var _data = angular.fromJson(response);
            $scope.customers = response.data; // please check the request response if list id in data object 
        }, function (error) {
            throw error;
        })
    }

    getCutomers();

});

Upvotes: 1

Mohan Singh
Mohan Singh

Reputation: 883

Controller Code

    var app = angular.module('Napp', []);
    app.controller('GetAlphabetical', function ($scope, $http) {

        $scope.filt = 'All';

        $scope.setFilter = function (letter) {
            $scope.filt = letter;
        };

        $scope.names = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

        $scope.startsWith = function (customer) {
            var lowerStr = (customer.Name + "").toLowerCase();
            var letter = $scope.filt;
            if (letter === 'All') return true;
            return lowerStr.indexOf(letter.toLowerCase()) === 0;
        }

        function getCutomers() {
            $http.get('@Url.Content("~/Home/GetPesrons")').then(function (response) {
                var _data = angular.fromJson(response);
                $scope.customers = _data.data; // please check the request response if list id in data object 
            }, function (error) {
                throw error;
            })
        }

        getCutomers();

    });

HTML CODE

<ul>
  <li ng-repeat="cust in customers | filter:startsWith | orderBy: 'Name' | filter : txtsearch">{{cust.Name}}</li>
</ul>

Upvotes: 1

Related Questions