CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangular-routingng-view
Mardymar
Mardymar

Reputation: 419

Using ng-repeat inside ng-view

I am trying to use an ng-repeat inside of an ng-view, but it is not pulling in the data. I was reading on the forums that I could use a factory, but I don't think using a service would be acceptable since the data for my $scope uses $routeParams to query its data.

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
        when('/:name', {
            templateUrl: 'welcome.html',
            controller: 'myController'
        }).
        otherwise ({
        redirectTo: '/'
    });
}]);


myApp.controller('myController', ['$scope', '$routeParams', '$q', function($scope, $routeParams, $q) {
    var pls = users($q, $routeParams.name);
    $scope.sBP = pls;
}]);

function users($q, name) {
var playersDFD = $q.defer();
var players = new Array();
var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", name);
query.find({
    success: function (results) {
        for (var i in results) {
            sPlayer = new player(results[i].get("playerName"), results[i].get("score"), results[i].get("cheatMode"));
            players.push(sPlayer);
        }
        playersDFD.resolve(players);
    },
    error: function (error) {
        alert('error');
        playersDFD.reject(data);
    }
});

return playersDFD.promise
    .then(function (results) {
        return results;
    })
    .catch(function (error) {
        alert(error.message);
    });
};

function player(name, score, cheatm){
    this.name = name;
    this.score = score;
    this.cheatm = cheatm; 
};

And the view:

<p ng-repeat="s in sBP">
    {{ s.name }}
</p>

Upvotes: 1

Views: 205

Answers (1)

Darren Reid
Darren Reid

Reputation: 2322

Let your users function return the promise rather than trying to resolve it, this ends up with code that is a lot easier to follow and will give the consumers of the user function control of what to do once you receive a response. For example.

function users($q, name) {
    var playersDFD = $q.defer();
    var players = new Array();
    var GameScore = Parse.Object.extend("GameScore");
    var query = new Parse.Query(GameScore);
    query.equalTo("playerName", name);
    query.find({
        success: function (results) {
            for (var i in results) {
                sPlayer = new player(results[i].get("playerName"), results[i].get("score"), results[i].get("cheatMode"));
                players.push(sPlayer);
            }
            playersDFD.resolve(players);
        },
        error: function (error) {
            alert('error');
            playersDFD.reject(data);
        }
    });

    return playersDFD.promise;
}

And then use the users function and handle then itself.

users($q, $routeParams.name).then(function (response) {
    $scope.sBP = response;
}, function (error) {
    // handle error.
});

Also I would recommend breaking out users into it's own service to inject $q rather than pass it in.

Hope that helps.

Upvotes: 1

Related Questions