Incorporating list updates in Angular

Question

Incorporating list updates in Angular

I am brand new to angular and currently working on adding functionality to a list. I have a couple of queries.

Why does the console.log output for $scope.newChat show as undefined?
Is newChat accessible to the sendChat() function due to variable hoisting?

Template

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

.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 is the question in query 1
    newchat.lastText  = "";
  }
})

javascript angularjs ionic-framework

Answer 1

Answer №1

1) When console.log is used on $scope.newChat, why does it return undefined?

When you access newChat on the scope using console.log($scope.newchat);, try logging it without the scope like this: console.log(newchat);. Both methods are the same because newChat in ng-model makes it available on the scope. Check the console after clicking the send button in the demo below.

2) Is newChat available for the sendChat() call due to variable hoisting?

No, it is available due to ng-model data binding.

Demo

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

1) When console.log is used on $scope.newChat, why does it return undefined?

When you access newChat on the scope using console.log($scope.newchat);, try logging it without the scope like this: console.log(newchat);. Both methods are the same because newChat in ng-model makes it available on the scope. Check the console after clicking the send button in the demo below.

2) Is newChat available for the sendChat() call due to variable hoisting?

No, it is available due to ng-model data binding.

Demo

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 3

Answer №2

update your controller with the code below

.controller('MessagesCtrl', function($scope, Messages) {
  $scope.newMessage = {};
  $scope.messages = Messages.getAll();
  
  $scope.deleteMessage = function(message) {
    Messages.remove(message);
  }
  
  $scope.sendMessage = function(newMessage){
    Messages.add(newMessage);
    console.log($scope.newMessage); //you can now access $scope.newMessage
    newMessage.text = "";
  }
})

Answer 4

update your controller with the code below

.controller('MessagesCtrl', function($scope, Messages) {
  $scope.newMessage = {};
  $scope.messages = Messages.getAll();
  
  $scope.deleteMessage = function(message) {
    Messages.remove(message);
  }
  
  $scope.sendMessage = function(newMessage){
    Messages.add(newMessage);
    console.log($scope.newMessage); //you can now access $scope.newMessage
    newMessage.text = "";
  }
})

Incorporating list updates in Angular

Answer №1

Answer №2

Similar questions

Exploring the capabilities of storing and retrieving nested objects within a React database

JavaScript program failing to execute

Child object in Three.js does not inherit transformation from its parent

ways of exporting and using arrays in Node.js

Unable to create module instance, despite correct module definition

Automatic resizing of line charts in Angular with nvd3

Is there a way to retrieve information from a different object?

What is the reason behind JavaScript objects lacking a toJSON() method?

What is the best way to differentiate the handling of a 401 Unauthorized response from other errors within an Angular 8 service that utilizes RxJS?

Guide to filling a dropdown menu by aligning with the text it contains?

Different from Window.Print()

Leverage Express JS to prevent unauthorized requests from the Client Side

Creating a seamless connection between a nodejs backend and a frontend interface

Animating three-dimensional objects using Three.js in real-time

Angular directive for D3 chart not displaying on the page

Expanding parent nodes in Jstree to load child nodes dynamically (json)

The Functionality of $rootScope.$broadcast with Dual Arguments

Incorporating a personalized event into a directive

Issue with dropdown list functionality in Internet Explorer not functioning correctly

Troubleshooting issue with Express.json() functionality in the latest release of version 4.17