angularjs – Ng-admin：我如何制作实体的自定义模板listView？

发布时间：2020-12-17 07:10:49 所属栏目：安全来源：网络整理

导读：我尝试制作自定义模板listView,例如： import listTemplate from '../templates/listTemplate.html';var users = admin.getEntity('users'); users .listView() .template(listTemplate) .actions([]) .title('All users') .perPage(10) .fields([ nga.field

我尝试制作自定义模板listView,例如：

import listTemplate from '../templates/listTemplate.html';

var users = admin.getEntity('users');
  users
    .listView()
    .template(listTemplate)
    .actions([])
    .title('All users')
    .perPage(10)
    .fields([
      nga.field('email'),nga.field('name')
    ])
    .filters([
       nga.field('filter','template')
         .label('')
         .pinned(true)
         .defaultValue('')
         .template('<div class="input-group"><input type="text" ng-model="value" placeholder="Search..." class="form-control"></input><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span></div>')
    ])
    .listActions(['edit','show']);

和listTemplate.html模板,我从ng-admin的源代码复制：

<div class="row list-view" ng-class="::'ng-admin-entity-' + listController.entity.name()">
    <div class="col-lg-12">
        <ma-datagrid name="{{ ::listController.view.name() }}"
                  entries="listController.dataStore.getEntries(listController.entity.uniqueId)"
                  selection="selection"
                  fields="::listController.fields"
                  list-actions="::listController.listActions"
                  entity="::listController.entity"
                  datastore="listController.dataStore">
        </ma-datagrid>
    </div>
</div>

<div class="row" ng-if="::!listController.infinitePagination">
    <div class="col-lg-12">
        <ma-datagrid-pagination
            page="{{ listController.page }}"
            per-page="{{ ::listController.view.perPage() }}"
            total-items="{{ listController.totalItems }}"
            set-page="::listController.setPageCallback">
        </ma-datagrid-pagination>
    </div>
</div>

<ma-datagrid-infinite-pagination ng-if="::listController.infinitePagination"
            per-page="{{ ::listController.view.perPage() }}"
            total-items="{{ ::listController.totalItems }}"
            next-page="::listController.nextPageCallback">
</ma-datagrid-infinite-pagination>

但是当我在浏览器上打开时它只显示空列表,因为自定义listView模板无法获取listController实例.谁能帮我？

解决方法

您应该复制listLayout.html模板：

<div class="row list-header">
    <div class="col-lg-12">
        <div class="page-header">

            <ma-view-actions override="::llCtrl.actions" selection="selection" batch-buttons="::llCtrl.batchActions" entity="::llCtrl.entity" datastore="::llCtrl.dataStore" search="::llCtrl.search" filters="::llCtrl.filters" enabled-filters="llCtrl.enabledFilters" enable-filter="llCtrl.enableFilter">
                <ma-filter-button filters="filters()" enabled-filters="enabledFilters" enable-filter="enableFilter()"></ma-filter-button>
                <ma-view-batch-actions buttons="::batchButtons()" selection="selection" entity="::entity"></ma-view-batch-actions>
                <ma-export-to-csv-button entity="::entity" search="::search" datastore="::datastore"></ma-export-to-csv-button>
                <ma-create-button ng-if="::entity.creationView().enabled" entity="::entity"></ma-create-button>
            </ma-view-actions>

            <h1 compile="::llCtrl.view.title()">
                {{ ::llCtrl.view.entity.name() | humanize | pluralize }} list
            </h1>
            <p class="lead" ng-if="::llCtrl.view.description()" compile="::llCtrl.view.description()">{{ ::llCtrl.view.description() }}</p>
        </div>

        <ma-filter-form ng-if="llCtrl.hasFilters" filters="llCtrl.enabledFilters" values="llCtrl.search" datastore="::llCtrl.dataStore" remove-filter="::llCtrl.removeFilter"></ma-filter-form>

    </div>
</div>

<div ui-view="grid"></div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!