CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
bbish007
bbish007

Reputation: 55

Angularjs Nested ng-repeat with expression used in filter

I am trying to use a value from the first ng-repeat in a filter in the nested ng-repeat.

Specifically {{alpha.value}}. This renders fine in the first repeat, note the filter and the h3 tag.

However the expression renders as text in the second repeat, again not the filter, and thus the repeat is empty as it doesn't match. I feel like I am missing something incredibly obvious. Any thoughts? Thanks

<div ng-repeat="alpha in alphabet" ng-hide="(tlds | filter: {group: '.{{alpha.value}}'}).length<1" ng-cloak="cloak">
    <h3>{{alpha.value}}</h3>
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="tld in tlds | filter: {group: '.{{alpha.value}}'} | filter: {name: query} | orderBy: 'name'" ng-cloak="cloak">
            <a href="/downloads/pdftld/{{tld.pdf}}" target="_blank">{{tld.name}}</a>
        </li>
    </ul>
</div>

JS Fiddle with it broken http://jsfiddle.net/eminentstyle/v5g4u948/2/

If I manually insert the intended expression result, line 20 filter: {group: '.c'}, you can see the intended result for the first section http://jsfiddle.net/eminentstyle/kwmj5mtu/2/

Upvotes: 1

Views: 345

Answers (1)

Giannis Grivas
Giannis Grivas

Reputation: 3412

I think you want this: http://jsfiddle.net/v5g4u948/3/

<div class="container" ng-app="Tlds">
    <div class="page-header">
         <h1>Tlds</h1>

    </div>
    <div class="row">
        <div class="col-sm-12">
            <input type='search' class='form-control' placeholder='Search' ng-model='query' />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" ng-controller="TldsCtrl">
            <div ng-repeat="alpha in alphabet" ng-hide="(tlds | filter: {group: '{{alpha.value}}'} | filter: {name: query}).length<1" ng-cloak="cloak">
                 <h3>{{alpha.value}}</h3>

                <ul class="list-group">
                    <li class="list-group-item" ng-repeat="tld in tlds | filter: {group: alpha.value} | filter: {name: query} | orderBy: 'name'" ng-cloak="cloak"> <a href="/downloads/pdftld/{{tld.pdf}}" target="_blank">{{tld.name}}</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Be carefull filter: {group: '.{{alpha.value}}' means to filter all group that contains alpha.value. For example . 'ie' matches with 'e'.

Upvotes: 2

Related Questions