angularjs_AngularJS를 사용하여 간단한 테이블 만들기-JS 튜토리얼-php.cn

angularjs_AngularJS를 사용하여 간단한 테이블 만들기

WBOY

풀어 주다： 2016-05-16 15:18:56

원래의

1343명이 탐색했습니다.

내 인생의 첫 번째 프로젝트입니다. 테이블을 만들고 다양한 기능을 구현해야 하기 때문에 이전에 익숙하지 않았던 다양한 문제와 지식을 모두를 위해 여기에 기록하겠습니다. 배우고 소통하고 해결해보세요. 완벽하지 않거나 사양에 맞지 않을 수도 있으니, 더 좋은 방법이 있으면 지적해주세요. 앞으로 새로운 기능이 추가된다면 수시로 소개해드리겠습니다

우선 테이블을 BootStrap 스타일로 편집하는데 주로angularjs를 사용합니다. 편의상 jQuery 방식도 있는데 테스트할 때 bootstrap,angularjs,jq 파일을 직접 도입해야 합니다.

텍스트:

HTML 부분

테이블 생성은 상대적으로 간단합니다. 주로 Anglejs 데이터 바인딩과 ng-repeat를 통해 각 정보를 자동으로 생성합니다.

1. 먼저 헤더의 내용, 즉 광고의 코드를 맞춤설정해야 합니다

　1.1 ng-model은 체크박스의 전체 선택 기능입니다. 이 상태의 데이터를 바인딩하여 tbody의 모든 체크박스에 동기적으로 할당할 수 있습니다(ng-checked 사용).

2. tbody에서 ng-repeat를 반복하여 각 정보를 생성합니다.

　2.1

는 여러 줄의 콘텐츠 입력을 지원하는 div이며, 빠르고 쉽게 교체할 수 있습니다. 그러나 ng-model은 div의 데이터 바인딩을 지원하지 않으므로 나중에 설명할 ngmodel 기능을 사용자 정의하려면 지시문을 사용해야 합니다

　2.3 ng-repeat에서 select 태그를 사용하여 데이터를 바인딩할 수 있습니다. ng-model을 각 옵션에 바인딩할 수는 없습니다.

3. 마지막으로 $scope.saveData에 데이터를 할당하여 테이블을 생성합니다

<table class="table table-striped table-bordered table-hover"
            id="example" style="margin-top:10px;">
          <thead>
          <tr>
            <th style="width: 20px;" rowspan="2">全选 <br><input type="checkbox" ng-model="selectAll"></th>
            <th style="text-align: center; width: 50px;vertical-align: middle" rowspan="2">序号</th>
            <th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">名称</th>
            <th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">日期</th>
            <th style="text-align: center; width: 150px;" colspan="3">比赛队伍（红）</th>
            <th style="text-align: center; width: 150px;" colspan="3">比赛队伍（蓝）</th>
            <th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">比分</th>
            <th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">说明</th>
            <th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">玩家支持队伍</th>
          </tr>
          <tr>
            <th style="text-align: center; width: 80px;">第一场</th>
            <th style="text-align: center; width: 80px;">第二场</th>
            <th style="text-align: center; width: 80px;">说明</th>
            <th style="text-align: center; width: 80px;">第一场</th>
            <th style="text-align: center; width: 80px;">第二场</th>
            <th style="text-align: center; width: 80px;">说明</th>
          </tr>
          </thead>
<tbody ng-click="fun()" id="page" ng-show="isshow">
          <!--track by tb.id-->
            <tr ng-repeat="tb in saveDate"><!-- 只用angularjs实现点击一行就选中全行暂时无法实现 -->
              <td style="width: 20px;"><input type="checkbox" ng-checked="selectAll"></td>
              <td style="text-align:center;">{{tb.id}}</td>
              <td style="text-align:center;">{{tb.zbname}}</td>
              <td style="text-align:center;">{{tb.zbtime}}</td>
              <td style="text-align:center;">{{tb.zbrul1}}</td>
              <td style="text-align:center;">{{tb.zbrul2}}</td>
              <td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td>
              <td style="text-align:center;">{{tb.zbrul2}}</td>
              <td style="text-align:center;">{{tb.zbrul1}}</td>
              <td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td><!-- 2016.1.19通过可编译的div来代替输入框 -->
              <td style="text-align:center;">{{tb.score}}</td>
              <td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td>
              <td>
                <select name="" id="" ng-change="changetype(adds)" ng-model="adds" style="text-align:center;width:100%;min-width:80px;margin-bottom:0">
                  <option value="" ng-show="isShow">{{tb.type}}</option>
                  <option value="支持红方">支持红方</option>
                  <option value="支持蓝方">支持蓝方</option>
                  <option value="双方相同">双方相同</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>

로그인 후 복사

JS 부분: 모든 스크립트 부분 코드는angular.module("myModule",[]).controller('myCtrl', function($scope) {여기에 작성됨} Medium

코드 복사 코드는 다음과 같습니다.

$scope.isshow=true;

// 요청에서 얻은 데이터를 모방합니다

$scope.saveDate=[{ id:1,zbname:"중앙아시아지역대회",zbtime:"2015-12-03",zbrul1:"승리",zbrul2:"실패",por:"설명을 입력해주세요" ,점수:"2:1",유형:"빨간색 측면 지원"},

{ id:2,zbname:"한일 디비전 대회",zbtime:"2015-11-11",zbrul1:"승리",zbrul2:"승리",por:"설명을 입력하세요",score:"2 : 1",유형:"파란색 측면 지원"},

{ id:3,zbname:"유럽 및 미국 대회",zbtime:"2015-3-03",zbrul1:"실패",zbrul2:"승리",por:"설명을 입력하세요",score:"2: 1 ",type:"양쪽 모두 동일합니다."},

{ id:4,zbname:"중동 지역 대회",zbtime:"2016-1-05",zbrul1:"승리",zbrul2:"실패",por:"설명을 입력하세요",score:"2: 1 ",type:"파란색 측면 지원"},

{ id:5,zbname:"베이징 디비전 대회",zbtime:"2014-12-23",zbrul1:"실패",zbrul2:"승리",por:"설명을 입력하세요",score:"2:1 ",type:"양쪽 모두 동일합니다."},

{ id:6,zbname:"한국 디비전 대회",zbtime:"2015-11-01",zbrul1:"실패",zbrul2:"승리",por:"설명을 입력하세요",score:"2:1 ",type:"양쪽 모두 동일합니다."},

{ id:7,zbname:"일본 디비전 대회",zbtime:"2011-1-23",zbrul1:"승리",zbrul2:"실패",por:"설명을 입력하세요",score:"2:1 ",type:"빨간색 측면 지원"},

{ id:8,zbname:"중앙아시아 지역 대회",zbtime:"2013-12-15",zbrul1:"실패",zbrul2:"승리",por:"설명을 입력하세요",score:"2: 1",type:"파란색 측면 지원"},

{ id:9,zbname:"중앙아시아 지역 대회",zbtime:"2015-10-17",zbrul1:"실패",zbrul2:"승리",por:"설명을 입력하세요",score:"2: 1",유형:"빨간색 사각형 지원"},

{ id:10,zbname:"중앙아시아 지역 대회",zbtime:"2015-11-21",zbrul1:"승리",zbrul2:"승리",por:"설명을 입력하세요",score:"2: 1",type:"파란색 측면 지원"},

{ id:11,zbname:"중앙아시아 지역 대회",zbtime:"2015-2-02",zbrul1:"실패",zbrul2:"실패",por:"설명을 입력하세요",score:"2: 1",유형:"빨간색 사각형 지원"},

{ id:12,zbname:"중앙아시아 지역 대회",zbtime:"2015-2-05",zbrul1:"승리",zbrul2:"실패",por:"설명을 입력하세요",score:"2: 1",type:"양쪽 모두 동일합니다."}

]; // var arr=[]; // ngrepeat에서 생성된 각 데이터 정보를 각각 바인딩하는 데 사용됩니다.