我有1000多个数据,我需要将它放在一个ngTable中,而不是一列,我需要将这些数据拆分成多个列,比如说2,在20个项目之后使用过滤器和分页。是否可以使用ngTable?
例如:我有100件物品。在第1页,我将在第1列上列出前20项,在第2列中第2项20项。
以下是我的模板
<div class="col-md-12">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control search-inputbox" ng-model="namingConventionSearchText" />
</div>
</form>
</div>
<table class="table" ng-table="namingConventionParams">
<tr ng-repeat="item in items.instanceData | filter:namingConventionSearchText">
<td style="word-break:break-all">{{item}}</td>
</tr>
</table>
控制器代码
$scope.items = {
"title": "Task",
"instanceData": ["MOD_INT_REPL_INTERFACE_OBJ_DLY", "MOD_INT_REPL_INTERFACE_OBJ_DLY_test", "Test_By_Justin", "ENG_ATTACHMENT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_INSERT", "US_SYNC_ODS2ATHENS_ADDR_ATHENSID", "test", " US_VEVA_2_ODS_REPL_Customer_Maintenance", " US_VEVA_2_ODS_REPL_USER_TERR", "AAAA", "AAATEST5", "ACCT_VIS_ZIP_TO_TERR_FLTR", "ADDRESS_MERGE_PROC_TEST", "AGGSPEND_ODStoFF _WKLY", "ARA_USER_TERR", "Account_StgtoODS_Account", "Account_StgtoODS_Account_Old", "Account_edit", "ActivityLog", "Address_STGtoODS_Address", "Address_STGtoODS_Address_Old", "Affiliation_CMtoATHENS_STGtoODS", "BAV_ACCT_TERR_LOAD_DELTA", "BAV_BUS_ACNT_ALIGN", "BAV_REP_ALIGN", "BAV_UPDATE_TSF", "CALL2_SAMPLE replication inMIG", "CALL_OUTBOUND_DELETE", "CA_CIRCULO_INTERFACE_REPL_OBJ", "CA_CIRCULO_REPL_ACCOUNT", "CA_CIRCULO_REPL_ADDRESS", "CA_CIRCULO_REPL_CALL", "CA_CIRCULO_REPL_CALLSAMPLE", "CA_CIRCULO_REPL_PRODUCTCATALOG", "CA_CIRCULO_REPL_USER", "CEG_ACCOUNT_UPDATE", "CEG_ACCOUNT_UPDATE1", "CI_Agra_Samples_FF_STG", "CM_US_REPLtoFF_ACCOUNT", "CM_US_REPLtoFF_ADDRESS", "CM_US_REPLtoFF_CHILD_ACCOUNT", "CM_US_REPLtoFF_CHILD_ACCOUNT_Test", "CUSTOM_INTEGRATION_TEST", "Agra_Account_Merge_Id", "Agra_Samples_FF_to_STG1", "Agra_Samples_Product_OB", "Agra_Samples_STG1_to_STG2", "Agra_Samples_User_OB", "Consent", "Corp_BI_NZ_OR", "Corp_BI_SYC_ORA_NTZ", "CyclePlan", "CyclePlan Detail"]
};
$scope.namingConventionParams = new ngTableParams({
page: 1, // show first page
count: 10
}, {
defaultSort: "asc",
total: $scope.items.instanceData.length, // length of data
counts: [],
getData: function($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')($scope.items.instanceData, params.orderBy()) : $scope.items.instanceData;
orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
$scope.task_data = orderedData;
$scope.task_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
$defer.resolve($scope.task_data);
}
});
更新
这是我的plunker link。
答案 0 :(得分:2)
首先,我会尝试将我的字符串数组映射到对象数组,然后再绑定到ngTable,这对ngTable来说会更自然。像["string A", "string B"]
这样的内容会映射到[ { index: '0', text: 'string A'}, { index: '1', text: 'string B'}];
。
这就是我提出的单个字符串数组,每页分成两列。请注意我使用的自定义范围过滤器:
var app = angular.module('main', ['ngTable'])
.filter('slice', function() {
return function(items, page, size) {
return items.slice((page - 1) * size, page * size);
}
})
.filter('range', function() {
return function(start, length) {
var range = [];
for(var i = start; i < start + length; i++) {
range.push(i);
}
return range;
}
})
.controller('DemoCtrl', function($scope, $filter, ngTableParams, $log) {
$scope.items = {
"title": "Task",
"tableHeader": "Items",
"instanceData": ["MOD_INT_REPL_INTERFACE_OBJ_DLY", "MOD_INT_REPL_INTERFACE_OBJ_DLY_test", "Test_By_Justin", "ENG_ATTACHMENT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_INSERT", "US_SYNC_ODS2ATHENS_ADDR_ATHENSID", "test", " US_VEVA_2_ODS_REPL_Customer_Maintenance", " US_VEVA_2_ODS_REPL_USER_TERR", "AAAA", "AAATEST5", "ACCT_VIS_ZIP_TO_TERR_FLTR", "ADDRESS_MERGE_PROC_TEST", "AGGSPEND_ODStoFF _WKLY", "ARA_USER_TERR", "Account_StgtoODS_Account", "Account_StgtoODS_Account_Old", "Account_edit", "ActivityLog", "Address_STGtoODS_Address", "Address_STGtoODS_Address_Old", "Affiliation_CMtoATHENS_STGtoODS", "BAV_ACCT_TERR_LOAD_DELTA", "BAV_BUS_ACNT_ALIGN", "BAV_REP_ALIGN", "BAV_UPDATE_TSF", "CALL2_SAMPLE replication inMIG", "CALL_OUTBOUND_DELETE", "CA_CIRCULO_INTERFACE_REPL_OBJ", "CA_CIRCULO_REPL_ACCOUNT", "CA_CIRCULO_REPL_ADDRESS", "CA_CIRCULO_REPL_CALL", "CA_CIRCULO_REPL_CALLSAMPLE", "CA_CIRCULO_REPL_PRODUCTCATALOG", "CA_CIRCULO_REPL_USER", "CEG_ACCOUNT_UPDATE", "CEG_ACCOUNT_UPDATE1", "CI_Agra_Samples_FF_STG", "CM_US_REPLtoFF_ACCOUNT", "CM_US_REPLtoFF_ADDRESS", "CM_US_REPLtoFF_CHILD_ACCOUNT", "CM_US_REPLtoFF_CHILD_ACCOUNT_Test", "CUSTOM_INTEGRATION_TEST", "Agra_Account_Merge_Id", "Agra_Samples_FF_to_STG1", "Agra_Samples_Product_OB", "Agra_Samples_STG1_to_STG2", "Agra_Samples_User_OB", "Consent", "Corp_BI_NZ_OR", "Corp_BI_SYC_ORA_NTZ", "CyclePlan", "CyclePlan Detail", "CyclePlan Detail UPD", "CyclePlan TG", "CyclePlan UPD", "DELETE_ACCOUNT_FILT_NUCLEUS", "DELETE_LOV_REPOSITORY", "DELETE_TIME_OFF_TERITTORY", "DEL_EVNT_ATND", "DUMMIES", "Filewatcher Test", "MOD ACCT TERR LOADER DELTA ORM", "MOD ACCT TERR LOADER DELTA ORM W2", "MOD ACCT TERR LODER CP NORM ORM", "MOD ACCT TERR LODER CP NORM ORM W2", "MOD ACCT TERRITORY LOADER NORM ORM", "MOD ACCT TERRITORY LOADER NORM ORM W2", "MOD ATL NULL UPDATE_ORM", "MOD ATL NULL UPDATE_ORM_W2", "MOD Account Terty Loader Sync_ORM", "MOD Account Terty Loader Sync_ORM_W2", "MOD BRICK TO TERR DATA CLEAN ORM", "MOD BRICK TO TERR DATA CLEAN ORM W2", "MOD TA ACCT TERR LOADER COMB ORM", "MOD TA ACCT TERR LOADER COMB ORM W2", "MOD TA CALLING SP SYNC ORM", "MOD TA CALLING SP SYNC ORM W2", "MOD TA COUNTRY EU ORM", "MOD TA COUNTRY EU ORM_W2", "MOD TA CYCLE PLAN POWER CENTER ORM", "MOD TA CYCLE PLAN POWER CENTER ORM W2", "MOD TA RULE DELIMIT ORM", "MOD TA RULE DELIMIT ORM W2", "MOD TA RULE SPLIT SYNC ORM", "MOD TA RULE SPLIT SYNC ORM W2", "MOD TA USER NOTIFICATION_ORM", "MOD TA USER NOTIFICATION_ORM_W2", "MOD_CEG_ACCNTRELATIONS_INBOUND", "MOD_CEG_ACCNTRELATIONS_INBOUND_2", "MOD_CEG_ADDR_DEL", "MOD_CEG_AFFILIATIONS_INBOUND", "MOD_CEG_CHILD_ACNT_DEL", "MOD_CEG_Child_Account_PRIM_UNCHECK", "MOD_CEG_Codes_INBOUND", "MOD_CEG_INDIVIDUALADDR_INBOUND", "MOD_CEG_INDIVIDUAL_INBOUND", "MOD_CEG_Interest_Inbound", "MOD_CEG_Organisation_INBOUND", "MOD_CEG_Organisation_NAME_UPD", "MOD_CEG_REPL_ACCOUNT", "MOD_CEG_REPL_ACCOUNT_2", "MOD_CEG_REPL_ACCOUNT_GROUP", "MOD_CEG_REPL_ACCOUNT_PLAN_ACCOUNT_GROUP", "MOD_CEG_REPL_ADDRESS", "MOD_CEG_REPL_CALL2_VOD", "MOD_CEG_REPL_CHILD_ACCOUNT", "MOD_CEG_REPL_LOV", "MOD_CEG_REPL_Medical_EVENT_VOD", "MOD_CEG_REPL_QUESTION", "MOD_CEG_REPL_QUESTION_RESPONSE", "MOD_CEG_REPL_RECORDTYPE", "MOD_CEG_REPL_SHR_MEETING_COST", "MOD_CEG_REPL_SURVEY", "MOD_CEG_REPL_SURVEY_QUESTION", "MOD_CEG_REPL_SURVEY_TARGET", "MOD_CEG_Roles_INBOUND", "MOD_CEG_Speciality_Inbound", "MOD_CEG_Title_INBOUND", "MOD_CEG_VAL_REQ_REPL", "MOD_CEG_WORKPLACEADDR_INBOUND", "MOD_CYCLE_PLAN_TARGETS", "MOD_INDI_ADDRESS_DELETE", "MOD_IND_ADDRESS", "MOD_IND_ADDR_UPD", "MOD_INT_ORM_SYNC_TRACKING", "MOD_INT_ORM_REPL_INTERFACE_OBJ_DLY", "MOD_INT_ORM_REPL_INTERFACE_OBJ_DLY_W2", "MOD_INT_ORM_REPL_OTHER_OBJECTS_DLY", "MOD_INT_ORM_REPL_OTHER_OBJECTS_DLY_W2", "MOD_INT_ORM_REPL_SFDC_DM", "MOD_INT_ORM_SYNC_DM_CALL", "MOD_INT_ORM_SYNC_DM_CALL_DETAIL", "MOD_INT_ORM_SYNC_DM_CALL_KEY_MESSAGE", "MOD_INT_ORM_SYNC_DM_CALL_SAMPLES", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN_DETAIL", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN_TARGET", "MOD_INT_REPL_INTERFACE", "MOD_INT_REPL_INTERFACE_OBJ_DLY_BKP1", "MOD_INT_REPL_INTERFACE_OBJ_DLY_Dummy", "MOD_INT_REPL_INTERFACE_OBJ_DLY_TEST1", "MOD_INT_REPL_USER", "MOD_INT_SYNC_CALLS", "MOD_INT_SYNC_CALLS_SAMPLE", "MOD_INT_SYNC_CALLS_STATUS_UPD", "MOD_MIG_REPL_Account", "MOD_MIG_REPL_Account_2", "MOD_MIG_REPL_Questions", "MOD_MIG_REPL_Survey_Questuions", "MOD_MIG_REPL_Survey_Targets", "MOD_MIG_REPL_Surveys", "MOD_MIG_SYNC_CONSENT", "MOD_MIG_SYNC_QUESTION", "MOD_MIG_SYNC_QUESTION_RESP", "MOD_MIG_SYNC_SURVEY", "MOD_MIG_SYNC_SURVEY_QUESTIONS", "MOD_MIG_SYNC_SURVEY_TARGET", "MOD_MIG_SYNC_User", "MOD_SYNC_BALA_ACCOUNT2", "MOD_TA_ERROR_LOGIC ORM", "MOD_TA_ERROR_LOGIC ORM W2", "MOD_BALA", "MOD_BALA_2", "MOD_BALA_ACCOUNT", "MOD_BALA_CYCLE_PLAN", "MOD_BALA_OUTFILE", "MOD_BALA_OUTFILE_2", "SHANKAR", "SHANKAR_ALL_COLS", "SHANKAR_MIGRATE_TEST", "SHANKAR_SYNC_TEST", "JP_CLEANUP_ACCOUNT_CYCLE1_SYNC", "JP_CLEANUP_ADDRESS_CYCLE1_SYNC", "JP_CLEANUP_CALL2_CYCLE1_SYNC", "JP_CLEANUP_CHILD_CYCLE1_SYNC", "JP_CLEANUP_CYCLE1_REPL", "JP_UPD_BF_CLEANUP_CALL2_CYCLE1_SYNC", "JP_UPD_BF_CLEANUP_CALL2_CYCLE1_SYNC_2", "Login", "Logon_REST", "Migration_Test", "New", "OUS_ATHENS_REPL", "PC_STG_ADDRESS_to_ODS_ADDRESS_Test", "PC_US_FFtoSTG_CM_Dedupe_Xref", "PC_US_FFtoSTG_MDS_Territory_Alignment", "PC_US_IBtoIB_CM_Cust_Xref_MIX", "PC_US_IBtoOB_ATL_MigData", "PC_US_IBtoOB_ATL_RawData", "PC_US_IBtoOB_CyclePlan_Ups", "PC_US_IBtoOB_CyclePlnDtl_Ups", "PC_US_IBtoOB_CyclePlnTgt_Ups", "PC_US_IBtoOB_TSF_Upsert", "PC_US_MDS_FFtoSTG_Call_Guidance ", "PC_US_MDS_FFtoSTG_Call_Guidance_ADHD", "PC_US_MDS_FFtoSTG_Call_Guidance_GI", "PC_US_REPLtoSTG_Terr_Temp", "PC_US_RepltoOB_CyclePln_GetID", "Pattern_test", "REPL_SPL_REC_ACCNTTYPE", "Repl_BAV_mig1todev", "SPL_CHR_FF2STG", "SPL_CHR_REPL2FF", "SPL_CHR_STG2ODS", "Shyam_test", "Test Job", "Test Repl", "Test_1", "Test_account_replciation", "ENG_Attachment", "ENG_Attachment_Oracle_to_Oracle", "ENG_Attachment_REPL_CLOBtoBlob", "ENG_CONV_Account_ISDELETED_UPD", "ENG_CONV_Account_ISDELETED_UPD_2", "ENG_CONV_Attachment_ISDELETED_UPD", "ENG_CONV_Contact_ISDELETED_UPD", "ENG_CONV_IW_CONSENT_UPD", "ENG_CONV_Infusion_training_ISDELETED_UPD", "ENG_CONV_PATIENT_ADDRESS_TO_SFDC_ADDRESS", "ENG_CONV_PATIENT_CASE_UPDATE", "ENG_CONV_PATIENT_CONTACT_TO_SFDC_CONTACT", "ENG_CONV_PATIENT_CONTACT_UPDATE", "ENG_CONV_PATIENT_TO_SFDC_CONTACT_2", "ENG_CONV_TO_SFDC_ACCOUNT", "ENG_CONV_Task_ISDELETED_UPD", "ENG_CONV_US_PM_Address_ISDELETED_UPD", "ENG_CONV_US_PM_Case_DMODosition_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Caregiver_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Case_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Consent_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Physician_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Product_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Product_Shipment_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Site_Of_Care_ISDELETED_UPD", "ENG_CONV_US_PM_Service_Request_ISDELETED_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PATIENT_SOC_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PATIENT_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_PAYER_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PAYER_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_PHYSICIAN_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_SOC_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ADDITIONAL_SOC_TO_SFDC_Additional_Site_of_Care__c_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ADDITIONAL_SOC_TO_SFDC_Additional_Site_of_Care__c_UPSERT", "ENG_CONV_Z_SFDC_ADDRESS_TO_SFDC_US_PM_ADDRESS_INSERT", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT_64KB", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT_Test", "ENG_CONV_Z_SFDC_CONTACT_CAREGIVER_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_CAREGIVER_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_PATIENT_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_PATIENT_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_PHYSICIAN_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_PHYSICIAN_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_UPD_PRODUCT", "ENG_CONV_Z_SFDC_INFUSION_TRAINING_TO_SFDC_INFUSION_TRAINING_INSERT", "ENG_CONV_Z_SFDC_PATIENT_CAREGIVER_TO_SFDC_PATIENT_CAREGIVER_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_CAREGIVER_TO_SFDC_PATIENT_CAREGIVER_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_CONSENT_TO_SFDC_US_PM_Patient_Consent__c_INSERT", "ENG_CONV_Z_SFDC_PATIENT_PHYSICAN_TO_SFDC_PATIENT_PHYSICIAN_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_PHYSICAN_TO_SFDC_PATIENT_PHYSICIAN_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_BATCH1", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_BATCH50", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_old", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_1", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_2", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_3", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_4", "ENG_CONV_Z_SFDC_PATIENT_SOC_TO_SFDC_PATIENT_SOC_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_SOC_TO_SFDC_PATIENT_SOC_UPSERT", "ENG_CONV_Z_SFDC_TASK_CYCLE_TO_SFDC_TASK_INSERT", "ENG_CONV_Z_SFDC_TASK_EVENT_TO_SFDC_TASK_INSERT", "ENG_CONV_Z_SFDC_TASK_EVENT_TO_SFDC_TASK_INSERT_SQ", "ENG_CONV_Z_SFDC_US_PM_CASE_DMODOSITION_TO_SFDC_CASE_DMODOSITION_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_UPSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_UPD", "ENG_CONV_Z_SFDC_US_PM_SERVICE_REQUEST_TO_SFDC_SERVICE_REQUEST_INSERT ", "ENG_MDM_IB_ACCOUNT_INS", "ENG_MDM_IB_ACCOUNT_UPD", "ENG_MDM_IB_ADDITIONAL_SOC_INS", "ENG_MDM_IB_CONTACT_INS", "ENG_MDM_IB_CONTACT_UPD", "ENG_MDM_IB_DUMMY_ACCOUNT_INS", "ENG_MDM_IB_IDENTIFIER_ACCOUNT_UPD", "ENG_MDM_IB_IDENTIFIER_CONTACT_UPD", "ENG_MDM_OB_DATA_STD_LASTNAME", "ENG_MDM_OB_DATA_STD_SPECIALTY", "ENG_MDM_OB_DATA_STD_SUFFIX", "ENG_SFDCINT_ODS_SFDC_REPL_ACCOUNT", "ENG_SFDC_CONTACT_TO_CNTRL_SFDC_CONTACT", "ENG_SFDC_TO_ODS_SFDC_REPL_ACCOUNT", "ENG_SFDC_TO_ODS_SFDC_REPL_ACTION_ITEM", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Partner", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Share", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Team_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Additional_Attendee", "ENG_SFDC_TO_ODS_SFDC_REPL_Additional_Site_of_Care", "ENG_SFDC_TO_ODS_SFDC_REPL_Address", "ENG_SFDC_TO_ODS_SFDC_REPL_Admin_Country_Region", "ENG_SFDC_TO_ODS_SFDC_REPL_Asset", "ENG_SFDC_TO_ODS_SFDC_REPL_Attachment", "ENG_SFDC_TO_ODS_SFDC_REPL_Awards_and_Honors", "ENG_SFDC_TO_ODS_SFDC_REPL_Books_and_Monographs", "ENG_SFDC_TO_ODS_SFDC_REPL_CONCEPT_BRIEF", "ENG_SFDC_TO_ODS_SFDC_REPL_Campaign", "ENG_SFDC_TO_ODS_SFDC_REPL_Campaign_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Case", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Comment", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Contact_Role", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_DMODosition", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Solution", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Team_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Clinical_Trials", "ENG_SFDC_TO_ODS_SFDC_REPL_Committees", "ENG_SFDC_TO_ODS_SFDC_REPL_Competitor", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact_1", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact_2", "ENG_SFDC_TO_ODS_SFDC_REPL_Contract", "ENG_SFDC_TO_ODS_SFDC_REPL_Country", "ENG_SFDC_TO_ODS_SFDC_REPL_Customer_Business_Plan", "ENG_SFDC_TO_ODS_SFDC_REPL_DASHBOARD", "ENG_SFDC_TO_ODS_SFDC_REPL_DASHBOARD_COMPONENT", "ENG_SFDC_TO_ODS_SFDC_REPL_De-Identified_Patient", "ENG_SFDC_TO_ODS_SFDC_REPL_Dropped_Item", "ENG_SFDC_TO_ODS_SFDC_REPL_Editorial_Boards", "ENG_SFDC_TO_ODS_SFDC_REPL_Educational_Activity", "ENG_SFDC_TO_ODS_SFDC_REPL_Event"],
groups: 2
};
$scope.tableFilter = {};
$scope.namingConventionParams = new ngTableParams({
page: 1, // show first page
count: 20,
filer: $scope.tableFilter
}, {
defaultSort: "asc",
total: $scope.items.instanceData.length, // length of data
counts: [],
getData: function($defer, params) {
var reverceOrder = params.orderBy() && params.orderBy().length > 0 && params.orderBy()[0].indexOf('-') > -1;
var orderedData = params.sorting() ? $filter('orderBy')($scope.items.instanceData, 'valueOf()', reverceOrder) : $scope.items.instanceData;
orderedData = $scope.tableFilter ? $filter('filter')(orderedData, $scope.tableFilter.text) : orderedData;
$scope.task_data = orderedData;
$scope.task_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
$defer.resolve($scope.task_data);
}
});
});
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div ng-app="main" ng-controller="DemoCtrl">
<h1>{{items.title}}</h1>
<div class="col-md-12">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control search-inputbox" ng-model="tableFilter['text']" />
</div>
</form>
</div>
<table class="table" ng-table="namingConventionParams">
<tbody>
<tr ng-repeat="rowIndex in 0 | range : $data.length / 2" ng-init="rangeSize = $data.length / 2">
<td style="word-break:break-all" data-title="items.tableHeader" align="left" filter="{ '0': 'text' }" sortable="'valueOf()'">{{$data[rowIndex]}}</td>
<td style="word-break:break-all" data-title="items.tableHeader" align="left" filter="{ '0': 'text' }" sortable="'valueOf()'">{{$data[rowIndex + rangeSize]}}</td>
</tr>
</tbody>
<div>
&#13;
答案 1 :(得分:-1)
以上代码效果很好..但搜索有问题。对我来说,如果我在第一页以外的任何页面上搜索都无法正常工作。我为过滤器添加了一块手表并重新加载了表格。
$scope.$watch("tableFilter.text", function (newValue, oldValue) {
$scope.namingConventionParams.reload();
$scope.namingConventionParams.$params.page = 1;
});