使用ng-repeat仅显示一行数据 - 离子应用

时间:2016-04-25 02:56:35

标签: javascript html angularjs ionic-framework firebase

对于任何高级错误感到抱歉,但我是新来的。 Codepen http://codepen.io/erinbelldeveloper/pen/pyZxZB

我正在尝试创建一个约会应用,一旦您将其推送到列表卡,就会显示来自页脚的数据。我的问题是数据的输出我只是希望它输出用户输入的最后一行而不是整个数据所以我认为问题是用ng-repeat所以我把这行写到代码是的,它只显示一行,但然后删除先前的数据。如果没有这些div行,它会输出一个包含所有数据的循环。理想情况下,我只想在消息内容超过1行但保留先前数据的情况下输出最后一行。

  <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 = [];



});

0 个答案:

没有答案