ionic list 头像

来源：互联网发布：js自定义函数编辑：程序博客网时间：2024/06/05 20:34

1、Html

<ion-view view-title="Chats">  <ion-content>    <ion-list>      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tabs/chats/{{chat.id}}">        <img ng-src="{{chat.face}}">        <h2>{{chat.name}}</h2>        <p>{{chat.lastText}}</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>    <br>    <ion-list>      <ion-item class="item-remove-animate item-avatar-right item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tabs/chats/{{chat.id}}">        <img ng-src="{{chat.face}}">        <h2>{{chat.name}}</h2>        <p>{{chat.lastText}}</p>        <ion-option-button class="button-assertive" ng-click="remove(chat)">          Delete        </ion-option-button>      </ion-item>    </ion-list>  </ion-content></ion-view>

2、Controller

.controller('ChatsCtrl', function ($scope, Chats) {    $scope.chats = Chats.all();    $scope.remove = function (chat) {        Chats.remove(chat);    };})

3、factory

angular.module('starter.services', [])    .factory('Chats', function () {        // Might use a resource here that returns a JSON array        // Some fake testing data        var chats = [            { id: 0, name: 'Ben Sparrow', lastText: 'You on your way?', face: 'img/ben.png' },            { id: 1, name: 'Max Lynx', lastText: 'Hey, it\'s me', face: 'img/max.png' },            { id: 2, name: 'Adam Bradleyson', lastText: 'I should buy a boat', face: 'img/adam.jpg' },            { id: 3, name: 'Perry Governor', lastText: 'Look at my mukluks!', face: 'img/perry.png' },            { id: 4, name: 'Mike Harrington', lastText: 'This is wicked good ice cream.', face: 'img/mike.png' }        ];        return {            all: function () {                return chats;            },            remove: function (chat) {                chats.splice(chats.indexOf(chat), 1);            },            get: function (chatId) {                for (var i = 0; i < chats.length; i++) {                    if (chats[i].id === parseInt(chatId)) {                        return chats[i];                    }                }                return null;            }        };    });

4、效果图

0 0