Ng-table: json 파일의 μ‚¬μš©μž 지정 λ°μ΄ν„°μ—μ„œλŠ” νŽ˜μ΄μ§€ 맀김이 μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2016λ…„ 08μ›” 02일  Β·  10μ½”λ©˜νŠΈ  Β·  좜처: esvit/ng-table

.json 파일의 μ‚¬μš©μž 지정 데이터λ₯Ό μ‚¬μš©ν•˜κ³  있으며 데이터에 νŽ˜μ΄μ§€λ₯Ό 맀기고 μ‹Άμ§€λ§Œ λͺ¨λ“  λ°μ΄ν„°λŠ” 단일 νŽ˜μ΄μ§€λ‘œ μ œκ³΅λ©λ‹ˆλ‹€. μ™œ 그래? μ•„λž˜λŠ” λ‚΄ μ½”λ“œμž…λ‹ˆλ‹€

 $http.get('app/user_keys.json').success(function(data) {
            vm.data = data;
            vm.tableParams = new NgTableParams({ page: 1, count: 2 }, {
                    total: vm.data.length,
                    getData: function (params) {
                        console.log(vm.data.length);
                        var deferred = $q.defer();
                        var orderedData = params.sorting() ? $filter('orderBy')(vm.data, params.orderBy()) : vm.data;
                        deferred.resolve(orderedData.slice((params.page() - 1) * params.count(),  params.page() * params.count()));
                    }
                });
        });
<table ng-table="vm.tableParams" class="table table-striped" >
                    <colgroup>
                          <col width="5%"/>
                          <col width="30%"/>
                          <col width="50%"/>
                          <col width="15%"/>
                    </colgroup>
                    <tr ng-repeat="row in vm.data | filter: searchText  track by $index">
                        <td header="'headerCheckbox.html'">
                        <input type="checkbox" value="row._id" ng-model="vm.checkboxes.items[row._id]" ></td>
                        <td data-title="'ID'">{{ row.index }}</td>
                        <td data-title="'Cloud Location'">{{ row.location }}</td>
                        <td data-title="'Action'"><i class="fa fa-trash"></i></td>
                    </tr>
                </table>

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ’‹μ•„ μˆ˜μ •ν–ˆμŠ΅λ‹ˆλ‹€. dataOptions κ°€ undefined 일 수 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€. λ”°λΌμ„œ μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μ•„μ•Ό ν•©λ‹ˆλ‹€.

 if (settings.dataOptions && !settings.dataOptions.applyPaging) {
   return ngTableDefaultGetData(result, params);
 }

λͺ¨λ“  10 λŒ“κΈ€

μ†ŒμŠ€κ°€ JSON νŒŒμΌμ΄λΌλŠ” 사싀과 관련이 μžˆλ‹€κ³  ν™•μ‹ ν•˜μ‹­λ‹ˆκΉŒ?
λ‚΄ 데이터 μ†ŒμŠ€κ°€ μ„œλΉ„μŠ€μ΄μ§€λ§Œ λ™μΌν•œ λ¬Έμ œκ°€ μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

ν•΄λ‹Ή μ„œλΉ„μŠ€λŠ” 약속을 λ°˜ν™˜ν•˜κ³  ν•΄κ²°λ˜λ©΄ κ²°κ³Όλ₯Ό λ°˜ν™˜ν•˜κΈ° 전에 μ„€λͺ…μ„œμ— μ„€λͺ…λœ λŒ€λ‘œ params.total() λ₯Ό μ„€μ •ν–ˆμ§€λ§Œ νŽ˜μ΄μ§€ 맀김은 μ—¬μ „νžˆ β€‹β€‹μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

κ·Έλ£Ή 데이터λ₯Ό νŽ˜μ΄μ§•ν•  λ•Œλ„ 같은 λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ getGroups ν•¨μˆ˜μ˜ 끝에 이 쀄을 μΆ”κ°€ν•©λ‹ˆλ‹€.

if (!settings.dataOptions.applyPaging) {
    return ngTableDefaultGetData(result, params);
}
return ngTableDefaultGetData.applyPaging(result, params);

μ‚¬μš©λœ κΈ°λ³Έ λ˜λŠ” μ‚¬μš©μž μ •μ˜μ—μ„œ μž‘λ™ν•˜λŠ” νŽ˜μ΄μ§€ 맀김.

예, 이것은 #872μ—μ„œ μ–ΈκΈ‰ν•œ 거의 λ™μΌν•œ μ†”λ£¨μ…˜μž…λ‹ˆλ‹€. settings.dataOptions.applyPaging 체크가 μœ„μ˜ 일뢀 λΌμΈμ—μ„œ μˆ˜λ™μœΌλ‘œ false둜 μ„€μ •λ˜μ–΄ 있기 λ•Œλ¬Έμ— μ€‘μš”ν•œμ§€ 잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€.

@fsm3xpert , @tandibar , @ fsm3xpertμ—μ„œ μ œμ•ˆν•œ μ†”λ£¨μ…˜μ„ μ μš©ν–ˆλŠ”λ° μž‘λ™ν•˜μ§€λ§Œ μ½˜μ†”μ— λ‹€μŒμ΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

Possibly unhandled rejection: {}

μ–΄λ–€ 아이디어?

μ’‹μ•„ μˆ˜μ •ν–ˆμŠ΅λ‹ˆλ‹€. dataOptions κ°€ undefined 일 수 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€. λ”°λΌμ„œ μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μ•„μ•Ό ν•©λ‹ˆλ‹€.

 if (settings.dataOptions && !settings.dataOptions.applyPaging) {
   return ngTableDefaultGetData(result, params);
 }

BTW, ng-table의 ν–₯ν›„ λ¦΄λ¦¬μŠ€λŠ” μ€‘μ²©λœ μ„€μ • κ°’(EG
dataOptions)λŠ” μ •μ˜λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

2016λ…„ 12μ›” 21일 μˆ˜μš”μΌ μ˜€ν›„ 7μ‹œ 19λΆ„, Maria InΓ©s Parnisari <
[email protected]>은 λ‹€μŒκ³Ό 같이 μΌμŠ΅λ‹ˆλ‹€.

Ok μˆ˜μ •ν–ˆμŠ΅λ‹ˆλ‹€. dataOptionsκ°€ μ •μ˜λ˜μ§€ μ•Šμ•˜μ„ 수 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€. κ·Έλž˜μ„œ μ½”λ“œ
ν•΄μ•Όν•œλ‹€

if (settings.dataOptions && !settings.dataOptions.applyPaging) {
λ°˜ν™˜ ngTableDefaultGetData(κ²°κ³Ό, λ§€κ°œλ³€μˆ˜);
}

β€”
이 μŠ€λ ˆλ“œμ— κ°€μž…ν–ˆκΈ° λ•Œλ¬Έμ— 이 λ©”μ‹œμ§€λ₯Ό λ°›κ³  μžˆμŠ΅λ‹ˆλ‹€.
이 이메일에 직접 λ‹΅μž₯ν•˜κ³  GitHubμ—μ„œ ν™•μΈν•˜μ„Έμš”.
https://github.com/esvit/ng-table/issues/893#issuecomment-268614815 λ˜λŠ” μŒμ†Œκ±°
μŠ€λ ˆλ“œ
https://github.com/notifications/unsubscribe-auth/AA2HPk4I47xMpIlEbXSDSCMUu0mlGn7Vks5rKXu4gaJpZM4Jagxg
.

λˆ„κ΅¬λ“ μ§€ λ‚˜μ™€ 같은 λ¬Έμ œκ°€ μžˆλŠ” 경우λ₯Ό λŒ€λΉ„ν•˜μ—¬ 라이브러리 μ½”λ“œλ₯Ό λ³€κ²½ν•˜λŠ” 것이 μ–΄λ–€ μ΄μœ λ‘œλ“  μ˜΅μ…˜μ΄ μ•„λ‹Œ 경우 ν•΄κ²° 방법을 μ°Ύμ•˜μŠ΅λ‹ˆλ‹€.

λ¬Έμ œλŠ” κ·Έλ£Ήν™”κ°€ λ‹¨μˆœνžˆ νŽ˜μ΄μ§•λœ 데이터λ₯Ό μ²˜λ¦¬ν•˜κΈ° μœ„ν•΄ κ΅¬ν˜„λ˜μ§€ μ•Šμ€ 것 κ°™μŠ΅λ‹ˆλ‹€. λ‚΄κ°€ ν•œ 일은 μ›ν•˜λŠ” νŽ˜μ΄μ§€μ— λŒ€ν•œ 데이터λ₯Ό κ²€μƒ‰ν•˜κ³  λ³€μˆ˜μ˜ 총 ν•­λͺ© 수λ₯Ό μΊμ‹œν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.
actualTotal = params.total()
그런 λ‹€μŒ http://ng-table.com/#/global -customization/demo-response-interceptors에 μ„€λͺ…λœ λŒ€λ‘œ 응닡 인터셉터λ₯Ό κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ—μ„œ 총 값을 μΊμ‹œλœ κ°’μœΌλ‘œ λ‹€μ‹œ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이것은 νŽ˜μ΄μ§• ν‘œμ‹œλ₯Ό μˆ˜μ •ν•©λ‹ˆλ‹€.

ν•œ 가지 남아 μžˆλŠ” λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. μ‚¬μš©μžκ°€ 1이 μ•„λ‹Œ λ‹€λ₯Έ νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•˜λ €κ³  ν•˜λ©΄ κ·Έλ£Ήν™”κ°€ λ‹€μŒ μ½”λ“œλ‘œ 데이터 배열을 λΆ„ν• ν•  λ•Œ 아무 것도 λ³Ό 수 μ—†λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.
var pagedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
이에 λŒ€ν•œ κ°„λ‹¨ν•œ ν•΄κ²° 방법은 데이터λ₯Ό κ²€μƒ‰ν•˜κ³  μ‹€μ œ νŽ˜μ΄μ§€λ₯Ό μΊμ‹œν•˜κ³  μΈν„°μ…‰ν„°μ—μ„œ μž¬μ„€μ •ν•œ ν›„ getData ν•¨μˆ˜μ—μ„œ νŽ˜μ΄μ§€λ₯Ό 1둜 μ„€μ •ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

μ œμ•ˆλœ μˆ˜μ • 사항을 μ μš©ν•œ ν›„ 필터링이 μž‘λ™μ„ λ©ˆμ·„μŠ΅λ‹ˆλ‹€. 이 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ μœ„μ˜ μ€„μ—μ„œ dataOptions λ₯Ό λ‹€μŒκ³Ό 같이 μ„€μ •ν•΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€.

settings.dataOptions = { applyPaging: false, applyFilter: false };

이 μˆ˜μ • 사항을 μ΅œμ‹  λ²„μ „μ—μ„œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆκΉŒ? 그렇지 μ•Šμ€ 경우 μΆ”κ°€ν•΄μ•Ό ν•˜λŠ” 행에 μžˆμŠ΅λ‹ˆλ‹€.

λ§ˆμ§€λ§‰ λ²„μ „μ—μ„œλŠ” μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€.
이 μ½”λ“œ μ„Ήμ…˜μ„ μˆ˜μ •ν•˜λ©΄ μž‘λ™ν•©λ‹ˆλ‹€.
if (sortDirection) {
var orderByFn = ngTableDefaultGetData.getOrderByFn();
var orderBy = util_1.convertSortToOrderBy({
value: sortDirection
});
result = orderByFn(result, orderBy);
}
return ngTableDefaultGetData.applyPaging(result, params);

μ΄κ²ƒμœΌλ‘œ:
if (sortDirection) {
var orderByFn = ngTableDefaultGetData.getOrderByFn();
var orderBy = util_1.convertSortToOrderBy({
value: sortDirection
});
result = orderByFn(result, orderBy);
}
if (sortDirection) { var orderByFn = ngTableDefaultGetData.getOrderByFn(); var orderBy = util_1.convertSortToOrderBy({ κ°’: sortDirection }); κ²°κ³Ό = orderByFn(κ²°κ³Ό, orderBy); } if (!settings.dataOptions.applyPaging) { return ngTableDefaultGetData(κ²°κ³Ό, λ§€κ°œλ³€μˆ˜); } return ngTableDefaultGetData.applyPaging(κ²°κ³Ό, λ§€κ°œλ³€μˆ˜);`

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰