Angular ng-repeat和Bootstrap列不起作用

Question

我有一个显示项目列表的ng-repeat 。 我希望它们的宽度为2

这是index.html主体

的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>

这是我为ui-view提取的HTML

list.html

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

然而，正在发生的事情是它只是将所有东西堆叠在一起而不是彼此相邻。

这是inspect元素代码

<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>

只是在这里输入其他错误的是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;
});

Answer 1

ng-class期待一个Angular表达式。 在这种情况下，您将为其提供实际的CSS类名称。 Angular尝试将其作为表达式进行评估，从而导致未定义（或null或空字符串）。

由于您不需要执行任何操作，只需在此处应用类名，因此只需使用常规class属性而不是ng-class ：

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

Answer 2

ng-class需要一个表达式。 像这样更改你的标记：

<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

Answer 3

尝试在图像上使用ng-src。 在首次呈现页面时，可能无法确定图像大小。

编辑，所以完整的HTML应该是：

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

正如其他人所指出的那样，你不应该在这里使用ng-class。

Answer 4

问题是你在列周围重复div，而不是列本身。 尝试这个：

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

Angular ng-repeat和Bootstrap列不起作用

问题描述

4 个解决方案

解决方案1
2 2015-10-06 16:13:11

解决方案2
1 已采纳 2015-10-06 16:05:27

解决方案3
0 2015-10-06 16:05:36

解决方案4
0 2015-10-06 16:14:05

Angular ng-repeat和Bootstrap列不起作用

问题描述

4 个解决方案

解决方案1 2 2015-10-06 16:13:11

解决方案2 1 已采纳 2015-10-06 16:05:27

解决方案3 0 2015-10-06 16:05:36

解决方案4 0 2015-10-06 16:14:05

解决方案1
2 2015-10-06 16:13:11

解决方案2
1 已采纳 2015-10-06 16:05:27

解决方案3
0 2015-10-06 16:05:36

解决方案4
0 2015-10-06 16:14:05