Skip to main content

​
Description

The Result List directive.

​
Accessing result index

Within a search result you can access the index of the result by doing {{$parent.index}}. The index is zero-based so for result 1 the index will be 0.

​
Usage

as element: 
<search:result-list
       response="{object}"
       results="{array}"
       [infinite-scroll="{string}"]
       [query="{string}"]
       [platform="{string}"]
       [load-more="{boolean}"]>
</search:result-list>

​
Directive info

  • This directive creates new scope.

​
Parameters

ParamTypeDetails
responseobjectA response object (Use response or results not both)
resultsarrayA list of results (Use response or results not both)
infinite-scroll (optional)stringWhether infinite scrolling should be enabled (query and platform is required for this functionality to be enabled). Valid values:
● false Disables infinite scrolling. (default)
● true Enables infinite-scrolling in window mode (see below).
● window When the window is scrolled to the bottom of the result list new results will be loaded.
● parent When the parent element is scrollable when this element is scrolled to the bottom new results will load.
query (optional)stringThe name of the query object used for infinite scrolling or load more.
platform (optional)stringThe name of the platform object used for infinite scrolling or load more.
load-more (optional)booleanWhether to have a clickable link to load more results.

​
Example

​
Source

<layout:grid>
    <layout:block>
        <h3 id="example_accessing-the-index-of-a-result">Accessing the index of a result ($parent.index)</h3>
    </layout:block>
    <search:result-list response="response" styling="cards-sm-1 cards-md-2">
        <search:result>
            <layout:block>
                <div class="tk-stl-card">
                    <search:field name="name" styling="title" urlfield="url"></search:field>
                    <div class="field tk-rgrid-g tk-stl-label-left">
                        <p class="tk-rgrid-u-1 tk-rgrid-u-md-1-3 tk-stl-label">Index</p>
                        <div class="tk-rgrid-u-1 tk-rgrid-u-md-2-3">
                            <p><span class="value">{{$parent.index}}</span></p>
                        </div>
                    </div>
                    <search:field name="age" styling="label-left" label="Age"></search:field>
                    <search:field name="date" styling="label-left" label="Created Date" date-format="dd/MM/yy"></search:field>
                    <search:field name="blank" styling="label-left" label="Contact Number" default-value="No Contact Number on File."></search:field>
                    <search:field name="number" styling="label-left" label="Worth" number-format="£#,###.##"></search:field>
                    <search:field name="madeup" styling="label-left" label="Test"></search:field>
                    <search:field name="longstring" styling="label-left" label="Long String" max-characters="40" show-more></search:field>
                </div>
            </layout:block>
        </search:result>
    </search:result-list>
</layout:grid>
<layout:grid>
    <layout:block>
</layout:grid>

angular.module('lightning')
.controller('ExampleController', ['$scope','$timeout','ResponseService', function($scope,$timeout,ResponseService) {
            $scope.response = {
                page: 2,
                query: {
                    rpp: 50
                },
                hits:{
                    act:['long','1234']
                },
                facets: {
                },
                results: [
                    {
                        result: {
                            fields: {
                                name: {
                                    name: 'name',
                                    val: ['Testing Tester']
                                },
                                url: {
                                    name: 'url',
                                    val: ['http://twigkit.com']
                                },
                                age: {
                                    name: 'age',
                                    val: ['Long', 35]
                                },
                                date: {
                                    name: 'date',
                                    val: ['2014-11-11T00:00:00']
                                },
                                blank:{
                                    name:'blank',
                                    val:null,
                                },
                                number:{
                                    name:'number',
                                    val:[123456789]
                                },
                                longstring:{
                                    name:'longstring',
                                    val:['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.']
                                }
                            },
                        },
                    },
                    {
                        result: {
                            fields: {
                                name: {
                                    name: 'name',
                                    val: ['Foo (Bar)']
                                },
                                url: {
                                    name: 'url',
                                    val: ['http://twigkit.com']
                                },
                                age: {
                                    name: 'age',
                                    val: ['Long', 26]
                                },
                                date: {
                                    name: 'date',
                                    val: ['2015-11-11T00:00:00']
                                },
                                blank:{
                                    name:'blank',
                                    val:null,
                                },
                                number:{
                                    name:'number',
                                    val:[-123456789]
                                }
                            },
                        },
                    },
                ],
            }
            $scope.results = $scope.response.results;
            ResponseService.setResponse('response', $scope.response);
        }]);

​
Result

Result