Angularjs 角度ng重复和引导列不工作_Angularjs_Twitter Bootstrap

Angularjs 角度ng重复和引导列不工作

angularjs twitter-bootstrap

Angularjs 角度ng重复和引导列不工作,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我有一个显示项目列表的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"> <lin

我有一个显示项目列表的

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>

但现在发生的是，它只是将所有东西堆叠在一起，而不是将它们放在一起

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

ng类

需要一个表达式。按如下方式更改标记：

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


{{game.title}

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

编辑，因此完整的html应为：

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


{{game.title}

正如其他人指出的，您不应该在这里使用ng类

ng类

需要一个角度表达式。在本例中，您将为它指定实际的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>


{{game.title}

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

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


{{game.title}

还是不行。似乎当我检查元素时，ng repeat元素显示了一个ng scope类，而列不在哪里可以找到..这应该可以工作。你的引导CSS库是否正确地添加到HTML中？@ShashankAgrawal是的，我继续更新并显示所有依赖项，了解你的问题

ng类

需要一个表达式，所以您应该将字符串传递给它。@ShashankAgrawal将其更新为just类，但它仍然不知道col div的存在。哦！您可以通过检查browserNice catch中的元素来粘贴生成的HTML标记吗？但要明确的是，真正的问题是在原始代码中使用

ng class

，而他们只需要

class

属性，您也已更正了该属性。尝试了此操作，但仍然扩展了整个div，奇怪的是，实际的col-xs-2甚至没有出现。但标题和img确实如此。它似乎完全忽略了此类的存在。您确定您使用的是

class

而不是

ng class

？使用

class

属性设置样式与角度无关，我看不出有什么原因会失败。。。除非你的其他代码导致它被删除。另外，请注意，正如@Dan Crews在回答中指出的那样，你有一个额外的div。我不认为额外的div是问题所在，b/c你永远不会看到这个类被应用。但删除它不会有什么坏处。我尝试使用这里的每个答案，我继续使用inspect元素输出进行更新。仍然只是在彼此的顶部堆叠尝试了这个，但仍然不起作用。。仍然没有显示col-xs-2，它只是显示该div的类是ng scopeng，这很奇怪。生成的HTML与代码中的完全不同。有没有处理HTML的响应拦截器？还有，我看到两个

元素。虽然这应该不会引起任何问题，但你可以删除它。删除，我还添加了js，以防我搞砸了其他东西。还是很困惑为什么要这么做…很高兴你们找到了真相@interneteur只是一个旁注，不要使用带有字符串属性的

ng class

，如下所示。没必要。添加的类名没有任何动态性，因此不需要使用Javascript来应用样式。常规的

class

属性将为您应用样式，而不应用样式。

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

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