Ionic / AngularJS key not accessible in ng-repeat

Question

I am trying to access the {{key}} from an ng-repeat from a controller using Ionic 1. The {{key}} that is generated as text is different from the {{key}} I am receiving at the controller, not sure why this is.

What I want to do is find the div id which should be dynamically generated using the id = "historyHeader_{{key}}" and need to receive it using ng-click="loadInlineHistory({{key}})"

Controller:

$scope.loadInlineHistory = function (dateLoaded) {
    var textS = $("#historyHeader_"+dateLoaded).text();
}

View

<ion-list>
    <div ng-repeat="(key, value) in history  | groupBy: 'date'"" style="background:#fff;padding:0.4em">

        <div class="item item-divider">
            <span style="min-height: 100%" id="historyHeader_{{key}}"> {{key}}</span>
        </div>      

        <div style="width: 100%">

            <div class="row" ng-repeat="hist in value">
                <div ng-click="testRepeatx()">
                    <div class="row">
                        <div class="col col-50"  align="left">3 laterals  </div>
                        <div class="col col-50" align="left" style="color:#999">{{hist.reps}} calories</div>
                    </div> 
                </div>
            </div> 

            <div class="row" >
                <button class="button button-block button-balanced" ng-click="loadInlineHistory({{key}})"> <i class="ion-plus"></i></button>
            </div>      

        </div>
    </div>
</ion-list>

key value is accessible for objects. can you show us the history object? — M. Junaid Salaat
– M. Junaid Salaat, Commented Oct 13, 2016 at 10:12
And if {{key}} is available in the view then you should easily access it just by using loadInlineHistory(key) in ng-click — M. Junaid Salaat
– M. Junaid Salaat, Commented Oct 13, 2016 at 10:13
@JunaidSalaat yes that was the problem, I was using {{key }} and for some reason it was giving me a different number, removing those helped, thanks! — drew
– drew, Commented Oct 13, 2016 at 10:18

M. Junaid Salaat · Accepted Answer · 2016-10-13 10:21:40Z

1

Just remove the curly brackets from the ng-click function call.

<div class="row" >
    <button class="button button-block button-balanced"
      ng-click="loadInlineHistory(key)"> <i class="ion-plus"></i></button>
</div>

answered Oct 13, 2016 at 10:21

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic / AngularJS key not accessible in ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related