Question

我是角色新手并试图实现添加到列表功能。我有几个问题

为什么console.log $scope.newChat返回 undefined
newChat由于变量提升而sendChat()可用。

模板

<ion-list>
      <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>
      <ion-item >
        <form ng-submit="sendChat(newchat)"> <!-- this line in question 2 -->
            <label class="item item-input">
              <input type="text" placeholder="What do you need to do?" ng-model="newchat.lastText">
            <button type="submit" class="button button-right button-positive">Send</button>
            </label>
          </div>
        </form>
      </ion-item>
    </ion-list>

控制器

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
  $scope.sendChat = function(newchat){
    Chats.set(newchat);
    console.log($scope.newchat); //this line in question 1
    newchat.lastText  = "";
  }
})

Answer 1

1）为什么$ scope.newChat的console.log返回undefined

您正在获得范围console.log($scope.newchat);的新聊天尝试使用console.log(newchat);的控制台日志记录它们都与ng-model中的新聊天相同，使其在范围内可用。在下面的演示中单击发送按钮后查看控制台

2）由于变量提升，newChat是否可用于sendChat（）调用。

由于ng-model数据绑定而无法使用

<强>演示

＆＃13;

angular.module('myApp',[])
.controller('ChatsCtrl', function($scope) {
  //$scope.chats = Chats.all();
  $scope.remove = function(chat) {
    //Chats.remove(chat);
  }
  $scope.sendChat = function(newchat){
   // Chats.set(newchat);
    console.log($scope.newchat); //this line in question 1
    newchat.lastText  = "";
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ChatsCtrl"> <form ng-submit="sendChat(newchat)"> <!-- this line in question 2 -->
            <label class="item item-input">
              <input type="text" placeholder="What do you need to do?" ng-model="newchat.lastText">
            <button type="submit" class="button button-right button-positive">Send</button>
            </label>
         
        </form>
     
 </div>

＆＃13;

Answer 2

将您的控制器更改为以下

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.newchat = {};
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
  $scope.sendChat = function(newchat){
    Chats.set(newchat);
    console.log($scope.newchat); //now you will have your $scope.newchat
    newchat.lastText  = "";
  }
})

以角度添加到列表功能

2 个答案: