如何使用 ng-repeat 实现 flex答案

【问题标题】：how to impliment flex with ng-repeat如何使用 ng-repeat 实现 flex
【发布时间】：2016-05-06 23:14:07
【问题描述】：

我正在使用面板来显示用户列表并使用 ng-repeat 应用 flex 但它不起作用请帮我这样做，我也想为此面板实现滚动

这是我的代码：

<div class="form-group" ng-show="Employee">
  <label  class="col-xs-2 control-label"></label>
  <div class="col-xs-6">
    <div class="panel panel-primary panel-default" id="panel3">
      <div class="panel-heading swpanel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-target="#collapseThree" href="" class="collapsed">Mobile EmployeeList:</a>
        </h4>
      </div>                        
      <div id="collapseThree" class="panel-collapse collapse col-xs-6">
        <div layout="row" layout-wrap flex >                                                
          <div flex="50" ng-repeat="item in mobileEmployeeList">                        
            <input type="checkbox" ng-checked="exists(item.rep_id, selectedEmployeeList)" ng-click="toggle(item.rep_id, selectedEmployeeList)">
              {{ item.rep_name }} 
              <span ng-if="exists(item.rep_id, selectedEmployeeList)"></span>
            </input>
          </div>
        </div>                    
      </div>                        
    </div>
  </div>
</div>

【问题讨论】：

你能创建一个plunker吗，plnkr.co
你不使用引导程序吗？？而 flex 是 angular-material 属性
为数组添加控制器代码 - mobileEmployeeList
mobileEmployeeList 来自数据库，它包含如下数组数据：[Object { rep_name="sankar", rep_id=14}, Object { rep_name="Mahadev", rep_id=16},Object { rep_name= "deleteUser", rep_id=45}]
@MohsinMuzawar 所以我们不能在 bootstrap 中使用 flex 吗？还有其他选择吗？

标签： angularjs html css flexbox

【解决方案1】：

可能是这样的：

<md-content md-padding>
  <md-list id="users-list" class="flex flex-col">

    <ul class="flex flex-row full-width" ng-repeat="user in mobileEmployeeList">
      <input flex="5" type="checkbox" ng-checked="exists(item.rep_id, selectedEmployeeList)" ng-click="toggle(item.rep_id, selectedEmployeeList)">{{ item.rep_name }}
      <span ng-if="exists(item.rep_id, selectedEmployeeList)"></span>

      <li flex="25" class="flex flex-col">{{user.name}}</li>
      <li flex="25" class="flex flex-col">{{user.username}}</li>
    </ul>
  </md-list>
</md-content>

【讨论】：