정보실

웹학교

정보실

angularjs AngularJS - Multiple Layout Grid 템플릿

본문

<body ng-app='myApp'>

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

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

  <h1>AngularJS - Multiple Layout Grid</h1>

  <h4>with <a href="">RandomUser.me</a> API</h4>

  <hr>

  <div class="clearfix">

    <ul class="nav nav-pills pull-right">

      <li ng-class="{'active':mode==1}" title="list"><a href="#" ng-click="mode=1"><i class="fa fa-list fa-4x"></i></a></li>

      <li ng-class="{'active':mode==2}" title="thumbs"><a href="#" ng-click="mode=2"><i class="fa fa-th fa-4x"></i></a></li>

      <li ng-class="{'active':mode==3}" title="big thumbs"><a href="#" ng-click="mode=3"><i class="fa fa-th-large fa-4x"></i></a></li>

    </ul>

  </div>

  <hr>

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

    <div class="row">

      <div ng-repeat-start="u in users" ng-class="{'col-xs-4':mode==1, 'col-xs-3':mode==2, 'col-xs-6':mode==3}">

        <div class="well">

          <a href="" ng-click="showUserModal($index)"><img src="{{u.user.picture.medium}}" class="img-responsive"></a>

          <h3 class="cap" ng-hide="mode==1">{{u.user.name.first}}</h3>

          <p ng-show="mode==3">

            {{u.user.location.city}}, {{u.user.location.state}} {{u.user.location.zip}}<br>

            {{u.user.phone}}

          </p>

        </div>

      </div>

      <div ng-class="{'col-xs-8':mode==1, 'col-xs-6':mode==3}" ng-hide="mode==2||mode==3">

        <h2 class="cap">{{u.user.name.first}} {{u.user.name.last}} <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 class="row">

            <div class="col-sm-6">

              <p>

                {{u.user.location.city}}, {{u.user.location.state}} {{u.user.location.zip}}<br>

                {{u.user.phone}}

              </p>

            </div>

          <div class="col-sm-6 text-right">

              <div class="hidden-xs">

                <a href="">{{u.user.email}}</a><br>

                <h3><span class="label label-primary">{{u.user.username}}</span></h3>

              </div>

            </div>

         </div>

      </div>

      <div ng-repeat-end="" ng-class="{'clearfix':mode==1}"></div>

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

    <hr>

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

  

  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

    <div class="modal-content">

        <div class="modal-header bg-info">

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            <h1 id="myModalLabel" class="text-center"></h1>

        </div>

        <div class="modal-body">

          <div class="container-fluid">

          <div class="row">

            <div class="col-xs-4 col-xs-offset-4"><img src="{{currUser.picture}}" class="img-thumbnail img-responsive img-circle"></div>

            </div>

            <hr>

            <div class="row">

              <h4 class="text-center"><i class="fa fa-fw fa-map-marker fa-2x"></i> {{currUser.location.street}} {{currUser.location.city}}, {{currUser.location.state}}</h4>

              <h4 class="text-center"><i class="fa fa-fw fa-phone fa-2x"></i> {{currUser.cell}}</h4>

              <h4 class="text-center"><i class="fa fa-fw fa-envelope-o fa-2x"></i> {{currUser.email}}</h4>

              <h4 class="text-center"><i class="fa fa-fw fa-user fa-2x"></i> {{currUser.username}}</h4>

            </div>

          </div>

        </div>

        <div class="modal-footer bg-info">

            <button class="btn btn-lg btn-default center-block" data-dismiss="modal" aria-hidden="true">Okay!</button>

        </div>

    </div>

    </div>

  </div><!--/modal-->

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

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

페이지 정보

조회 294회 ]  작성일15-05-23 19:57

웹학교