목록에 기능 목록에 추가

Question

저는 새로운 기능이며 add to list 기능을 구현하려고합니다. 나는 몇 가지 질문이

1. 이유 정의되지 않은
2. 때문에 변수 리프팅에 sendChat() 호출에 사용할 수 newChat가 console.log 반환 $scope.newChat의 않습니다.

템플릿

<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) 왜 $의 CONSOLE.LOG 반환 scope.newChat 않습니다 정의되지 않은

범위에서 newchat을 얻고 있습니다 console.log($scope.newchat);console.log(newchat);으로 콘솔 로깅을 시도하십시오. 둘 다 ng-model의 newchat와 동일하므로 범위에서 사용할 수있게하십시오. 아래 데모에서 보내기 버튼을 클릭 한 후 콘솔을 참조하십시오.

2) 가변 호이 스팅 때문에 sendChat() 호출에 newChat을 사용할 수 있습니까?

아니 그것 때문에 NG-모델 데이터는 데모

바인딩 사용할 수 있습니다

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 = ""; 
 
    } 
 
})

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

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 = ""; 
    } 
}) 

을 다음과 컨트롤러