有什么办法可以通过列表吗？离子框架

Question

您好，我有物品清单。像这样：

// 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'
  }];

如您所见，每个列表项都有一个名为 city 的 lastText。这是我的视图文件： `

  <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>

`

我有一个函数getWeather(chat.lastText)，它返回所选城市的天气。变量cityname 和dweather。我想显示存储在每个列表项的 lastText 变量中的每个城市的天气。但它只显示每个列表项的第一个城市的天气。我的问题是如何使它成为可能？

Answer 1

我不知道您的 getWeather 函数是什么样的，但不要将结果分配给“全局”范围变量，而应该将它们放入 chat 对象：

$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;
    });
}

那么你可以这样显示：

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

Answer 2

从ng-init 中删除getWeather(chat.lastText) 并尝试以下方式。 ng-init 在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>

或尝试以下方式使用另一个 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}}">
  <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>