정보실

웹학교

정보실

angularjs AngularJS - Data List 템플릿

본문

<body ng-app='myApp'>

<i class="fa fa-spin fa-refresh fa-5x" id="loader"></i>

<div class="container" ng-controller="Main"> 

  <h2>AngularJS - User Data Grid</h2>

  <hr>

  <div class="row" id="userList">

    <table class="table-responsive">

    <thead>

      <tr>

        <th class="col-xs-1"></th> 

        <th class="col-xs-2">Last</th> 

        <th class="col-xs-2">First</th>

        <th class="col-xs-2">Username</th>

        <th class="col-xs-2">Phone</th>

        <th class="col-xs-2">Location</th> 

        <th class="col-xs-1"></th>

      </tr>

    </thead>

    <tbody>

      <tr ng-repeat-start="u in users" ng-click="showDetail(u.user)" ng-class-odd="'alt'">

        <td class="col-xs-1"><img title="{{u.user.name.first}}" src="{{u.user.picture}}" class="img-thumbnail img-responsive img-circle"></td> 

        <td class="col-xs-2 cap">{{u.user.name.last}}</td> 

        <td class="col-xs-2 cap">{{u.user.name.first}}</td>

        <td class="col-xs-2 strong">{{u.user.username}}</td>

        <td class="col-xs-2">{{u.user.phone}}</td>

        <td class="col-xs-2">{{u.user.location.state}}</td> 

        <td class="col-xs-1"><a href=""><i class="fa fa-plus fa-3x"></i></a></td>

      </tr>

      <tr ng-repeat-end="" ng-show="active==u.user.username" ng-class-odd="'alt'">

        <td></td> 

        <td colspan="6">

          <div class="row">

            <div class="col-xs-12"><h2 class="cap">{{u.user.name.first}} <i ng-show="u.user.gender=='female'" class="fa fa-female"></i><i ng-show="u.user.gender=='male'" class="fa fa-male"></i></h2></div>

            <div class="col-md-3 col-xs-6 small">

              <label>Username</label> {{u.user.username}}<br>

              <label>Registered</label> {{u.user.registered | date:'MM/dd/yyyy'}}<br>

              <label>Email</label> {{u.user.email}}

            </div>

            <div class="col-md-3 col-xs-6 small">

              <label>Address</label> {{u.user.location.street}}<br>

              <label>City</label> {{u.user.location.city}}<br>

              <label>Zip Code</label> {{u.user.location.zip}}<br>

            </div>

            <div class="col-md-3 col-xs-6 small">

              <label>Birthday</label> {{u.user.dob | date:'MM/dd/yyyy'}}<br>

              <label>Phone</label> {{u.user.phone}}<br>

              <label>Cell</label> {{u.user.cell}}<br>

            </div>

            <div class="col-md-2 col-xs-12 text-center">

              <img title="{{u.user.name.first}}" src="{{u.user.picture}}" class="img-thumbnail img-responsive img-circle center-block">

            </div>

            <div class="col-xs-12"><hr></div>

          </div>

        </td>

      </tr>

    </tbody>

    </table>

  </div><!--/row-->

</div><!--/container-->

 

<hr> 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 311회 ]  작성일15-05-23 19:55

웹학교