Any way to go through list? Ionic Framework

Question

Hi I have list with items. Like this:

// Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'London',
    face: 'img/ben.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Paris',
    face: 'img/max.png'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'Berlin',
    face: 'img/adam.jpg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Tokio',
    face: 'img/perry.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'Milan',
    face: 'img/mike.png'
  }];

As you see every list item has a lastText with a name of city. And this is my view file: `

  <ion-item class="item-remove-animate item-avatar item-icon-right" ng-init="getWeather(chat.lastText)" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}" >
    <img ng-src="{{chat.face}}">

    <h2>{{cityname}}</h2>
    <p>{{dweather}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-click="remove(chat)">
      Delete
    </ion-option-button>
  </ion-item>
</ion-list>

`

I have a function getWeather(chat.lastText) which returns weather of selected city. Variables cityname and dweather. I want to show weather of every city stored in lastText variable of every list item. But it shows only weather of first city for every list item. My question is how to make it possible?

Possible duplicate of [angularjs - ngRepeat with ngInit - ngRepeat doesn't refresh rendered value](http://stackoverflow.com/questions/15355122/angularjs-ngrepeat-with-nginit-ngrepeat-doesnt-refresh-rendered-value) — Vikrant Yadav, Feb 27 '17 at 07:06

score 1 · Accepted Answer · answered Feb 27 '17 at 08:16

I don't know what your getWeather function looks like, but instead of assigning the results to a 'global' scope variable, you should put them to the chat object:

$scope.getWeather = function(chat) {
    // get weather
    weatherService.getWeather(chat.lastText).then(function(response) {
        var weatherResult = response.data;
        chat.cityname = weatherResult.cityname;
        chat.dweather = weatherResult.dweather;
    });
}

Then you can display it like this:

<ion-item ng-init="getWeather(chat)">
    {{ chat.cityname }}
    {{ chat.dweather }}
</ion-item>

Then please include in your question how your `getWeather` function looks like. Like I said, because you didn't include your code, I did some assumptions which you'll have to apply to your own code of course based on how it's written — devqon, Feb 28 '17 at 08:17

coder · Answer 2 · 2017-02-28T03:55:30.620

Remove getWeather(chat.lastText) from ng-init and just try following way. ng-init calls only once in ng-repeat.

<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
  <img ng-src="{{chat.face}}">
{{getWeather(chat.lastText)}}
  <h2>{{cityname}}</h2>
  <p>{{dweather}}</p>
  <i class="icon ion-chevron-right icon-accessory"></i>

  <ion-option-button class="button-assertive" ng-click="remove(chat)">
    Delete
  </ion-option-button>
</ion-item>
</ion-list>

or try following way using another ng-repeat only for call the function

<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
  <img ng-src="{{chat.face}}">
  <div ng-repeat="n in getWeather(chat.lastText)"></div>
  <h2>{{cityname}}</h2>
  <p>{{dweather}}</p>
  <i class="icon ion-chevron-right icon-accessory"></i>

  <ion-option-button class="button-assertive" ng-click="remove(chat)">
    Delete
  </ion-option-button>
</ion-item>
</ion-list>

I tried this before. It causes a hard loop. All items on list quickly go though list view without stopping. It causes loop — Red Shaman, Feb 27 '17 at 19:34

Any way to go through list? Ionic Framework

2 Answers2