javascript - 有什么办法可以浏览列表吗? ionic 框架

标签 javascript angularjs ionic-framework

您好,我有项目 list 。像这样:

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

如您所见,每个列表项都有一个带有城市名称的lastText。这是我的 View 文件: `

  <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),它返回所选城市的天气。变量citynamedweather。我想显示存储在每个列表项的lastText 变量中的每个城市的天气。但它只显示每个列表项的第一个城市的天气。我的问题是如何使其成为可能?

最佳答案

我不知道您的 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>

关于javascript - 有什么办法可以浏览列表吗? ionic 框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42479608/

相关文章:

javascript - 在 Struts2 的 jsp 中映射表中的行数错误

javascript - 使用 angular-translate 库在 javascript 中使用什么关键字来获取 i18n 翻译?

angularjs - angular-google-maps 中心缩放多个标记

java - localStorage 不会在使用 Java 8 重建 Ionic (Cordova) 应用程序时持续存在

Angular HttpClient 授权 header 已创建但消失了

javascript - 打开表单上传对话框时如何设置默认文件夹

javascript - 使用 Threejs 将彩色线条加载到浏览器中

javascript - 将 id 从模型传递到 View Backbone.js

javascript - 我应该怎么做才能限制字符数?

javascript - 如何使用 mongodb 数据延迟加载 Angular