Twitter Bootstrap Question posted in

Twitter bootstrap – 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;
});
Tags:

4

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search