javascript - Using ng-repeat to display only one row of data-Ionic app -
sorry mistakes in advanced, i'm new here. codepen http://codepen.io/erinbelldeveloper/pen/pyzxzb
i'm trying create appointment app displays data footer once push list card. issue output of data want output last line inputted user not entire data figured issue ng-repeat wrote line code yes shows 1 row removes prior data. without div lines outputs loop data. ideally want output last line if message content has more 1 row keeping prior data.
<ion-view class="appointments-view"> <ion-nav-title> <span>appointments</span> </ion-nav-title> <ion-content class="content-stable" on-swipe-left="hidetime = false" on-swipe-right="hidetime = true" ng-controller="appointmentscontroller"> </br></br> <div class="list card" > <div class="item item-divider">appointment list </br></br> <label class="weekly">weekly dates: </label> <div class="apptdates"> <input id="start" type="date" ng-model="appoinment.startdate"/><input id="end" type="date" ng-model="appointment.enddate" /> </div> <div class="item item-body"> <table id="appointmenttable2" class="displaytable" cellspacing="0" width="100%"> <tbody> <tr> <th>{{message.date}}</th> <th>time</th> <th>name</th> <th>appointment name</th> <th>appointment date</th> <th>appointment time</th> <th>status</th> </tr> </tbody> </table> <div ng-repeat="message in messages" ng-class="{other: message.userid != myid}" class="messages"><div ng-show="$last"> <div ng-repeat="message2 in messages2" ng-class="{other: message2.userid != myid}" class="messages2"><div ng-show="$last"> <div ng-repeat="message3 in messages3" ng-class="{other: message3.userid != myid}" class="messages3"><div ng-show="$last"> <div ng-repeat="message4 in messages4" ng-class="{other: message4.userid != myid}" class="messages4"><div ng-show="$last"> <div class="message" ng-class="{'slide-right': hidetime, '': !hidetime}"> <div class="message2" ng-class="{'slide-right': hidetime, '': !hidetime}"> <div class="message3" ng-class="{'slide-right': hidetime, '': !hidetime}"> <div class="message4" ng-class="{'slide-right': hidetime, '': !hidetime}"> <div class="time" ng-class="{'slide-right': hidetime, '': !hidetime}"> <div class="date" ng-class="{'slide-right': hidetime, '': !hidetime}"> <table id="appointmenttable2" class="displaytable" cellspacing="0" width="100%"> <thead> <tr> <th>date</th> <th>time</th> <th>name</th> <th>appointment name</th> <th>appointment date</th> <th>appointment time</th> <th>status</th> </tr> </thead> <tbody> <tr> <th><span >{{ message.date }}</span></th> <th><span>{{message.time}}</span></th> <th><span>{{message.text}}</span></th> <th><span>{{message2.text}}</span></th> <th><span>{{message3.text}}</span></th> <th><span>{{message4.text}}</span></th> <th><i class="icon ion-checkmark-circled positive large" id="statusicon" ui-sref="home.results"></i></th> </tr> </tbody> </table> </div> </div></div> </div></div></div></div></div></div></div></div></div></div></div> </br></br></br></br></br></br> </div> <table id="appointmenttable" class="display" cellspacing="0" width="100%"> <tfoot> <tr> <th>date</th> <th>time</th> <th>name</th> <th>appointment name</th> <th>appointment date</th> <th>appointment time</th> <th>status</th> </tr> </tfoot> </table> </div> </div> </br></br></br></br></br></br></br> <ion-footer-bar keyboard-attach class="bar-stable item-input-inset"> create appointment </br> <label class="item-input-wrapper"> </br> <table id="appointmenttable" class="display" cellspacing="0" width="100%"> <tfoot> <tr> <th>date</th> <th>time</th> <th><input type="text" placeholder="enter name " on-return="sendmessage(); closekeyboard()" ng-model="data.message" on-focus="inputup()" on-blur="inputdown()" /></th> <th><input type="text" placeholder="appointment name " on-return="sendmessage(); closekeyboard()" ng-model="data.message2" on-focus="inputup()" on-blur="inputdown()" /></th> <th><input type="text" placeholder="appointment date " on-return="sendmessage(); closekeyboard()" ng-model="data.message3" on-focus="inputup()" on-blur="inputdown()"/></th> <th><input type="text" placeholder="appointment time" on-return="sendmessage(); closekeyboard()" ng-model="data.message4" on-focus="inputup()" on-blur="inputdown()" /></th> <th>status</th> </tr> </tfoot> </table> </label> <i class="icon ion-plus-circled positive large" id="addicon" ng-click="sendmessage()"></i> </ion-footer-bar> </ion-content> </ion-view> js:
angular.module('app') .controller('appointmentscontroller', function($scope, $timeout, $ionicscrolldelegate) { $scope.hidetime = true; var alternate, isios = ionic.platform.iswebview() && ionic.platform.isios(); $scope.sendmessage = function() { alternate = !alternate; var d = new date(); var c=new date().tojson().slice(0,10); d = d.tolocaletimestring().replace(/:\d+ /, ' '); $scope.messages.push({ userid: alternate ? '12345' : '54321', text: $scope.data.message, time: d, date: c }); $scope.messages2.push({ userid: alternate ? '12345' : '54321', text: $scope.data.message2, time: d, date: c }); $scope.messages3.push({ userid: alternate ? '12345' : '54321', text: $scope.data.message3, time: d, date: c }); $scope.messages4.push({ userid: alternate ? '12345' : '54321', text: $scope.data.message4, time: d, date: c }); delete $scope.data.message; delete $scope.data.message2; delete $scope.data.message3; delete $scope.data.message4; $ionicscrolldelegate.scrollbottom(true); }; $scope.inputup = function() { if (isios) $scope.data.keyboardheight = 216; $timeout(function() { $ionicscrolldelegate.scrollbottom(true); }, 300); }; $scope.inputdown = function() { if (isios) $scope.data.keyboardheight = 0; $ionicscrolldelegate.resize(); }; $scope.closekeyboard = function() { // cordova.plugins.keyboard.close(); }; $scope.data = {}; $scope.data1 = {}; $scope.myid = '12345'; $scope.messages = []; $scope.messages2 = []; $scope.messages3 = []; $scope.messages4 = []; });
Comments
Post a Comment