Question

现在我正在使用AngularJS（angularfire）从firebase中检索数据，经过一些搜索，我发现了一些使用ng-switch切换行的示例代码，所以我可以有一个书籍网格（我正在写一点图书馆应用程序）。

由于某种原因，当我运行它时，我得到第一行看起来没问题，然后下一行显示1本书，然后其余的看起来正确。（每行3个）

enter image description here

这是我正在使用的“逻辑”＆gt;

<div ng-repeat="book in filteredBooks = (books | orderByPriority | filter:search)">
      <span ng-switch on="$index % 3">
        <div ng-class="row" ng-switch-when="0">
          <div class="col-lg-4" src="#" ng-show="filteredBooks[$index+0]">
          {{$index % 3}} -- {{$index}}
            <img src="http://covers.openlibrary.org/b/isbn/{{filteredBooks[$index+0].isbn}}-M.jpg"/> <br />
            <small><em>{{filteredBooks[$index+0].title}}</em></small><br />
            <small>ISBN: {{filteredBooks[$index+0].isbn.length}} -- {{filteredBooks[$index+0].isbn}} </small><br />
            <small>Dewey Decimal: {{filteredBooks[$index+0].class}} </small><br /> 
            <form name="checkoutForm">
               <blockquote>
                  <b>Who:{{checkout.name}}</b>
               </blockquote>
             <input ng-model="checkout.name" />
             <input type="submit" value="Submit" />
             </form>
          </div>

          <div class="col-lg-4" src="#" ng-show="filteredBooks[$index+1]">
          {{$index+1 % 3}} -- {{$index}}
            <img src="http://covers.openlibrary.org/b/isbn/{{filteredBooks[$index+1].isbn}}-M.jpg"/> <br />
            <small><em>{{filteredBooks[$index+1].title}}</em></small><br />
            <small>ISBN: {{filteredBooks[$index+1].isbn.length}} -- {{filteredBooks[$index+1].isbn}} </small><br />
            <small>Dewey Decimal: {{filteredBooks[$index+1].class}} </small><br />
          </div>

          <div class="col-lg-4" src="#" ng-show="filteredBooks[$index+2]">
          {{$index+2 % 3}} -- {{$index}}
            <img src="http://covers.openlibrary.org/b/isbn/{{filteredBooks[$index+2].isbn}}-M.jpg"/> <br />
            <small><em>{{filteredBooks[$index+2].title}}</em></small><br />
            <small>ISBN: {{filteredBooks[$index+2].isbn.length}} -- {{filteredBooks[$index+2].isbn}} </small><br />
            <small>Dewey Decimal: {{filteredBooks[$index+2].class}} </small><br />
          </div>
        </div>
      </span>
    </div>

基于0-0，1--0,2-0 ......的东西，我可以说它正在做正确的行（我认为）它似乎没有正确排列。

有人能指出我发生了什么和/或告诉我如何解决这个问题吗？我看到我们正在获得一个新的排，但我无法弄清楚为什么它不能将下两本书放在同一行中。

另一个可能相关的问题是col-lg-＃的数字是什么意思？

我尝试了不同的变化，我可能会看到显示方面略有不同，但仍然会有一些奇怪的，而不仅仅是一个简单的网格。

（我已经尝试了md / lg和2,3,4,5,6用于不同的＃，但没有看到任何帮助整体）

Answer 1

我怀疑ng-class=应该只是class=。

它发生在我们所有人身上。： - ）

没有使用bootstrap和angularjs正确排队的行

1 个答案: