CODEWITHSUNDEEP
angularjstwitter-bootstrap
nadermx
nadermx

Reputation: 2776

Angular ng-repeat and Bootstrap column not working

I have a ng-repeat that is displaying a list of items. I want them to be a col width of 2

This is the index.html body

index.html

<!DOCTYPE html>
<html ng-app="games">
<head>
    <title>Games</title>

    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/fontello.css">
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <meta name=viewport content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="/static/app/app.js"></script>

    <meta name=viewport content="width=device-width, initial-scale=1">

</head>
<body ng-controller="gamesCtrl">
    <a ui-sref="games">Games</a>
    <div class="container">
         <div class="row">
             <div ui-view></div>
         </div>
    </div>
</body>
</html>

And here is the HTML I am pulling for the ui-view

list.html

<div ng-repeat="game in games">
    <div ng-class="col-xs-2">
        {{ game.title }}
        <img src="{{game.thumbnailUrl100}}"/>
    </div>
</div>

What's happening though is its just stacking everything on top of each another and not putting it next to each other.

Here is the inspect element code

<div class="row">
    <!-- uiView:  -->
    <div ui-view="" class="ng-scope">
        <!-- ngRepeat: game in games -->
        <div ng-repeat="game in games" class="ng-scope">
        <div class="ng-binding">Cut The Rope</div>
        <img src="https://az680633.vo.msecnd.net/thumbnail/40071/100/40071.png">
    </div>
    <!-- end ngRepeat: game in games -->
    <div ng-repeat="game in games" class="ng-scope">
        <div class="ng-binding">Cut The Rope: Time Travel</div>
        <img src="https://az680633.vo.msecnd.net/thumbnail/40072/100/40072.png">
    </div>
</div>

Just incase something else is wrong here is the js

angular.module('games', ['ui.router', 'ui.bootstrap'])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/");
    //take out #
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });

    // Now set up the states
    $stateProvider
        .state('games', {
            url: "/",
            templateUrl: "/static/app/list.html",
            controller: 'gamesCtrl'
        })
})

.controller('gamesCtrl', ['$scope', '$state', 'gamesFactory',
    function($scope, $state, gamesFactory) {
         $scope.$state = $state;
         $scope.games = null;

         function init() {
           gamesFactory.getGames().success(function(games) {
             $scope.games = games.data;
             console.log($scope.games.data)
           });

         }
         init();
    }
])

.factory('gamesFactory', function($http) {
    var factory = {};
    factory.getGames = function() {
        return $http.get('/games.json');
    };
    return factory;
});

Upvotes: 1

Views: 2024

Answers (4)

Mike Feltman
Mike Feltman

Reputation: 5176

Try using ng-src on your image. At the time the page is first rendered, the image size probably can't be determined.

Edit, so the complete html should be:

<div ng-repeat="game in games">
    <div class="col-xs-2">
        {{ game.title }}
        <img src= "" ng-src="{{game.thumbnailUrl100}}"/>
   </div>

As others have pointed out, you shouldn't be using ng-class here.

Upvotes: 0

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

ng-class expects an expression. Change your markup like this:

<div ng-repeat="game in games">
    <div ng-class="'col-xs-2'">
        {{ game.title }}
        <img src="{{game.thumbnailUrl100}}"/>
    </div>
</div>

https://docs.angularjs.org/api/ng/directive/ngClass

Upvotes: 1

Dan Crews
Dan Crews

Reputation: 3597

The problem is that you're repeating the div around the columns, not the columns themselves. Try this:

<div class="col-xs-2" ng-repeat="game in games">
    {{ game.title }}
    <img src="{{game.thumbnailUrl100}}"/>
</div>

Upvotes: 0

Sunil D.
Sunil D.

Reputation: 18193

ng-class is expecting an Angular expression. In this case, you are giving it the actual CSS class name. Angular tries to evaluate that as an expression, which results in undefined (or null or the empty string).

Since you don't need to do anything but apply the class name here, just use the regular class attribute instead of ng-class:

<div ng-repeat="game in games">
  <div class="col-xs-2">
    {{ game.title }}
    <img src="{{game.thumbnailUrl100}}"/>
  </div>
</div>

Upvotes: 2

Related Questions