修改新建的ionic项目中默认根据id进行的通讯录信息匹配

来源：互联网发布：sql内连接和外连接编辑：程序博客网时间：2024/06/07 06:22

用cmd命令ionic start myApp tabs生成项目后，在项目中用ionic serve打开项目后如图所示：
这里写图片描述
代码中默认的是根据数据的id进行的信息匹配：
项目中services.js的代码：

var chats = [{    id: 10,    name: 'Ben Sparrow',    lastText: 'You on your way?',    face: 'img/ben.png',    qq:0  }, {    id: 11,    name: 'Max Lynx',    lastText: 'Hey, it\'s me',    face: 'img/max.png',    qq:1  }, {    id: 12,    name: 'Adam Bradleyson',    lastText: 'I should buy a boat',    face: 'img/adam.jpg',    qq:2  }, {    id: 13,    name: 'Perry Governor',    lastText: 'Look at my mukluks!',    face: 'img/perry.png',    qq:3  }, {    id: 14,    name: 'Mike Harrington',    lastText: 'This is wicked good ice cream.',    face: 'img/mike.png',    tiaoUrl:'www.baidu.com',    qq:4  }];  return {    all: function() {      return chats;    },    remove: function(chat) {      chats.splice(chats.indexOf(chat), 1);    },    get: function(chatId) {console.log(chatId)      for (var i = 0; i < chats.length; i++) {        if (chats[i].id === parseInt(chatId)) {          return chats[i];        }      }      return null;    }  };

跳转页面的地址如下：
这里写图片描述
里面的get方法可以看出是根据id进行匹配的，要想改为根据name进行匹配的话，要进行如下的修改.
首先对services.js中的get方法进行修改：
代码如下：

    //根据名字    get: function(name) {      for (var i = 0; i < chats.length; i++) {        if (chats[i].name === name) {          return chats[i];        }      }      return null;    }

找到chats页面，默认的页面名字为tab-chats.html
这里写图片描述
修改里面

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

href的地址为：#/tab/chats/{{chat.name}}
其实这样就可以实现根据name进行匹配了，但是controllers.js中

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {console.log($stateParams)  $scope.chat = Chats.get($stateParams.chatId);})

点击其中一条信息进入chat-detail.html页面后，$stateParams打印出的是：{chatId: “Ben Sparrow”}，显然chatId不是name，不怎么进行匹配，为了修改为一致的要做如下的操作：
在app.js中把chatId改为name，如下：

    .state('tab.chat-detail', {      url: '/chats/:name',      views: {        'tab-chats': {          templateUrl: 'templates/chat-detail.html',          controller: 'ChatDetailCtrl'        }      }    })

再把controllers.js中关于chat-detail.html页面的js代码中的chatId改为name，如下所示：

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {console.log($stateParams)  $scope.chat = Chats.get($stateParams.name);})

这样即可实现根据name进行数据的匹配，相应的想要根据别的字段进行数据匹配方法是一样的。

0 0