I am creating a dynamic, single-paged forum site using AngularJS as the front-end and Firebase as the back-end. The page consists of a list of threads on the left-hand side and the thread content on the right-hand side. The thread content displayed is based on the thread selected from the list.
I can successfully select a thread from the list and display its contents. However, when a thread is selected from the list, all of the other threads in the list become replicas of the selected thread. By this, I mean that the attribute values for the title, comments and votes of the selected thread are assigned to the same attributes in all of the other threads simultaneously, making them all identical. The ID of each thread does not change.
Can anybody give me some insight as to what is causing this issue? I can't identify anything in my code that would cause the attribute values of each Firebase object to be reassigned.
Here is the main.html page that contains the list and thread content sections
<div ng-controller="mainPageController">
<div>
<h3>
Welcome {{user.name}}! <button class="btn-danger img-rounded" ng-click="logout()" id="LogoutBtn">Logout</button>
</h3>
</div>
<div class="col-md-6">
<h2>All Threads</h2>
<div id="searchThreads" class="input-group col-md-5 img-rounded">
<input type="text" class="col-xs-5 form-control" ng-model="searchThread" placeholder="Search threads...">
</div>
<div id="addThread" class="input-group">
<input type="text" class="col-xs-5 form-control" ng-model="newThreadTitle" placeholder="New thread title..."/>
<button ng-click="addThread()">Add thread</button>
</div>
<!-- Thread List -->
<div>
<div ng-repeat="thread in threads | filter:searchThread | orderObjectBy:'votes'">
<button class="glyphicon glyphicon-chevron-up" ng-click="upvote(thread.$id, thread.votes)"></button> |
<button class="glyphicon glyphicon-chevron-down" ng-click="downvote(thread.$id, thread.votes)"></button>
<a href ng-click="showThread(thread)">{{thread.votes}}<span style="margin-left:1em"> {{thread.title}} by {{thread.username}}</span></a>
</div>
</div>
</div>
</div>
<!-- Thread content viiew -->
<div class="col-md-6">
<div ng-controller="threadPageController">
<h1>{{currentThread.title}} by {{currentThread.username}}</h1>
<div>
<input type="text" ng-model="newComment" placeholder="Write a comment..."/>
<button ng-click="addComment()">Add Comment</button>
</div>
<div>
<div ng-repeat="comment in currentThread.comments">{{comment.username}}: {{comment.text}}
</div>
<div ng-if="!currentThread.comments.length">There are no comments on this thread</div>
</div>
</div>
</div>
The mainPageController
angular.module('richWebApp')
.controller('mainPageController', function($scope, $location, userService, threadService, fb, $firebaseAuth, $filter){
$scope.user = userService.getLoggedInUser();
$scope.newThreadTitle = '';
$scope.currentThreadId = '';
$scope.threads = threadService.getAllThreads();
$scope.threads.$loaded().then(function(){
console.log($scope.threads)
});
$scope.users = userService.getLoggedInUsers();
$scope.addThread = function(){
if(!$scope.newThreadTitle){
return false; //Don't do anything if the text box is empty
}
var newThread = {
title: $scope.newThreadTitle,
username: $scope.user.name,
comments: [],
votes: 0
};
$scope.threads.$add(newThread);
$scope.newThread = '';
$scope.newThreadTitle = ''; //Clear the text in the input box
}
$scope.showThread = function(thread) {
$scope.$emit('handleEmit', {id: thread.$id});
};
$scope.upvote = function(threadId, threadVotes) {
var newVotes = threadVotes + 1;
var ref = new Firebase(fb.url);
var threadRef = ref.child("threads");
threadRef.child(threadId).update({
votes: newVotes
});
}
$scope.downvote = function(threadId, threadVotes) {
var newVotes = threadVotes - 1;
var ref = new Firebase(fb.url);
var threadRef = ref.child("threads");
threadRef.child(threadId).update({
votes: newVotes
});
}
$scope.logout = function(){
userService.logout();
}
});
The threadPageController
angular.module('richWebApp')
.controller('threadPageController', function($scope, $location, $routeParams, threadService, fb, userService){
$scope.$on('handleBroadcast', function (event, args) {
var threadId = args.id;
var currentThread = threadService.getThread(threadId);
currentThread.$bindTo($scope, 'currentThread') //creates $scope.thread with 3 way binding
});
$scope.newComment = '';
$scope.addComment= function(){
if(!$scope.newComment){
return false; //Don't do anything if the text box is empty
}
var currentUser = userService.getLoggedInUser();
var newComment = {
text: $scope.newComment,
username: currentUser.name
};
$scope.currentThread.comments = $scope.currentThread.comments || [];
$scope.currentThread.comments.push(newComment);
$scope.newComment = ''; //Clear the input box
}
});
threadService
angular.module("richWebApp").service("threadService", function($firebaseArray, $firebaseObject, fb){
this.getAllThreads = function(){
var ref = new Firebase(fb.url + '/threads');
return $firebaseArray(ref);
};
this.getThread = function(threadId){
var ref = new Firebase(fb.url + '/threads/' + threadId);
return $firebaseObject(ref);
};
});
Related
It is not like it is slow on rendering many entries. The problem is that whenever the $scope.data got updated, it adds the new item first at the end of the element, then reduce it as it match the new $scope.data.
For example:
<div class="list" ng-repeat="entry in data">
<h3>{{entry.title}}</h3>
</div>
This script is updating the $scope.data:
$scope.load = function() {
$scope.data = getDataFromDB();
}
Lets say I have 5 entries inside $scope.data. The entries are:
[
{
id: 1,
title: 1
},
{
id: 2,
title: 2
},
......
]
When the $scope.data already has those entries then got reloaded ($scope.data = getDataFromDB(); being called), the DOM element for about 0.1s - 0.2s has 10 elements (duplicate elements), then after 0.1s - 0.2s it is reduced to 5.
So the problem is that there is delay about 0.1s - 0.2s when updating the ng-repeat DOM. This looks really bad when I implement live search. Whenever it updates from the database, the ng-repeat DOM element got added up every time for a brief millisecond.
How can I make the rendering instant?
EDITED
I will paste all my code here:
The controller:
$scope.search = function (table) {
$scope.currentPage = 1;
$scope.endOfPage = false;
$scope.viewModels = [];
$scope.loadViewModels($scope.orderBy, table);
}
$scope.loadViewModels = function (orderBy, table, cb) {
if (!$scope.endOfPage) {
let searchKey = $scope.page.searchString;
let skip = ($scope.currentPage - 1) * $scope.itemsPerPage;
let searchClause = '';
if (searchKey && searchKey.length > 0) {
let searchArr = [];
$($scope.vmKeys).each((i, key) => {
searchArr.push(key + ` LIKE '%` + searchKey + `%'`);
});
searchClause = `WHERE ` + searchArr.join(' OR ');
}
let sc = `SELECT * FROM ` + table + ` ` + searchClause + ` ` + orderBy +
` LIMIT ` + skip + `, ` + $scope.itemsPerPage;
sqlite.query(sc, rows => {
$scope.$apply(function () {
var data = [];
let loadedCount = 0;
if (rows != null) {
$scope.currentPage += 1;
loadedCount = rows.length;
if (rows.length < $scope.itemsPerPage)
$scope.endOfPage = true
for (var i = 0; i < rows.length; i++) {
let item = rows.item(i);
let returnObject = {};
$($scope.vmKeys).each((i, key) => {
returnObject[key] = item[key];
});
data.push(returnObject);
}
$scope.viewModels = $scope.viewModels.concat(data);
}
else
$scope.endOfPage = true;
if (cb)
cb(loadedCount);
})
});
}
}
The view:
<div id="pageContent" class="root-page" ng-controller="noteController" ng-cloak>
<div class="row note-list" ng-if="showList">
<h3>Notes</h3>
<input ng-model="page.searchString" id="search"
ng-keyup="search('notes')" type="text" class="form-control"
placeholder="Search Notes" style="margin-bottom:10px">
<div class="col-12 note-list-item"
ng-repeat="data in viewModels track by data.id"
ng-click="edit(data.id)"
ontouchstart="touchStart()" ontouchend="touchEnd()"
ontouchmove="touchMove()">
<p ng-class="deleteMode ? 'note-list-title w-80' : 'note-list-title'"
ng-bind-html="data.title"></p>
<p ng-class="deleteMode ? 'note-list-date w-80' : 'note-list-date'">{{data.dateCreated | displayDate}}</p>
<div ng-if="deleteMode" class="note-list-delete ease-in" ng-click="delete($event, data.id)">
<span class="btn fa fa-trash"></span>
</div>
</div>
<div ng-if="!deleteMode" ng-click="new()" class="add-btn btn btn-primary ease-in">
<span class="fa fa-plus"></span>
</div>
</div>
<div ng-if="!showList" class="ease-in">
<div>
<div ng-click="back()" class="btn btn-primary"><span class="fa fa-arrow-left"></span></div>
<div ng-disabled="!isDataChanged" ng-click="save()" class="btn btn-primary" style="float:right">
<span class="fa fa-check"></span>
</div>
</div>
<div contenteditable="true" class="note-title"
ng-bind-html="selected.title" id="title">
</div>
<div contenteditable="true" class="note-container" ng-bind-html="selected.note" id="note"></div>
</div>
</div>
<script src="../js/pages/note.js"></script>
Calling it from:
$scope.loadViewModels($scope.orderBy, 'notes');
The sqlite query:
query: function (query, cb) {
db.transaction(function (tx) {
tx.executeSql(query, [], function (tx, res) {
return cb(res.rows, null);
});
}, function (error) {
return cb(null, error.message);
}, function () {
//console.log('query ok');
});
},
It is apache cordova framework, so it uses webview in Android emulator.
My Code Structure
<html ng-app="app" ng-controller="pageController">
<head>....</head>
<body>
....
<div id="pageContent" class="root-page" ng-controller="noteController" ng-cloak>
....
</div>
</body>
</html>
So there is controller inside controller. The parent is pageController and the child is noteController. Is a structure like this slowing the ng-repeat directives?
Btw using track by is not helping. There is still delay when rendering it. Also I can modify the entries as well, so when an entry was updated, it should be updated in the list as well.
NOTE
After thorough investigation there is something weird. Usually ng-repeat item has hash key in it. In my case ng-repeat items do not have it. Is it the cause of the problem?
One approach to improve performance is to use the track by clause in the ng-repeat expression:
<div class="list" ng-repeat="entry in data track by entry.id">
<h3>{{entry.title}}</h3>
</div>
From the Docs:
Best Practice: If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance, e.g. item in items track by item.id. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.
For more information, see
AngularJS ngRepeat API Reference -- Tracking and Duplicates
In your html, try this:
<div class="list" ng-repeat="entry in data">
<h3 ng-bind="entry.title"></h3>
</div>
After thorough research, I found my problem. Every time I reset / reload my $scope.viewModels I always assign it to null / empty array first. This what causes the render delay.
Example:
$scope.search = function (table) {
$scope.currentPage = 1;
$scope.endOfPage = false;
$scope.viewModels = []; <------ THIS
$scope.loadViewModels($scope.orderBy, table);
}
So instead of assigning it to null / empty array, I just replace it with the new loaded data, and the flickering is gone.
I'm trying to wrap my head around this PubNub ChatEngine example using Angular for first time https://github.com/pubnub/chat-engine-examples/tree/master/angular/simple
In demo when you click on user from the list new channel with random name is generated and user invited to it. So if you leave chat click on user again you connect to new channel.
I'm trying to do 1-1 chat rooms, that you could leave than join back, so changed channel name to be clicked user uuid. Now if I leave the channel, join back to it and try to send message it's not being shown in list, though it's being sent and user you are chatting with receives it.
In console I'm getting "Uncaught (in promise) TypeError: Converting circular structure to JSON" when starting to type (as have chat engine typing indicator running) and after submit.
I guess that's something to do with removing chat from global scope using splice() method and after joining back new chat being added. It works in demo because there are getting new channel each time and removing it, but not if using same channel now.
I tried to use splice() instead to see what happens. If I close chat and join back to it, it stays in DOM, and new one is added to scope, so have two same chat elements in DOM. If I type and send message on second one, it's not being displayed at it, but instead on first one that tried to close.
How could I get this working properly, can splice() be used in my case and I'm missing something else that is causing the error?
$scope.leave = (index) => {
$scope.chat.leave();
$scope.chats.splice(index, 1);
//$scope.chats.slice(index, 1);
//$scope.chats.splice( $scope.chats.indexOf($scope.chat), 1 );
}
angular.module('chatApp', ['open-chat-framework'])
.run(['$rootScope', 'ngChatEngine', function($rootScope, ngChatEngine) {
$rootScope.ChatEngine = ChatEngineCore.create({
publishKey: 'pub-c-d8599c43-cecf-42ba-a72f-aa3b24653c2b',
subscribeKey: 'sub-c-6c6c021c-c4e2-11e7-9628-f616d8b03518'
}, {
debug: true,
globalChannel: 'chat-engine-angular-simple'
});
// bind open chat framework angular plugin
ngChatEngine.bind($rootScope.ChatEngine);
// set a global array of chatrooms
$rootScope.chats = [];
}])
.controller('Chat', function($scope) {
$scope.chat.plugin(ChatEngineCore.plugin['chat-engine-typing-indicator']({
timeout: 5000
}));
// every chat has a list of messages
$scope.messages = [];
// we store the id of the lastSender
$scope.lastSender = null;
// leave a chatroom and remove from global chat list
$scope.leave = (index) => {
$scope.chat.leave();
$scope.chats.splice(index, 1);
}
// send a message using the messageDraft input
$scope.sendMessage = () => {
$scope.chat.emit('message', {
text: $scope.messageDraft
});
$scope.messageDraft = '';
}
// when we get notified of a user typing
$scope.chat.on('$typingIndicator.startTyping', (event) => {
event.sender.isTyping = true;
});
// when we get notified a user stops typing
$scope.chat.on('$typingIndicator.stopTyping', (event) => {
event.sender.isTyping = false;
});
// function to add a message to messages array
let addMessage = (payload, isHistory) => {
// if this message was from a history call
payload.isHistory = isHistory;
// if the last message was sent from the same user
payload.sameUser = $scope.messages.length > 0 && payload.sender.uuid == $scope.messages[$scope.messages.length - 1].sender.uuid;
// if this message was sent by this client
payload.isSelf = payload.sender.uuid == $scope.me.uuid;
// add the message to the array
$scope.messages.push(payload);
}
// if this chat receives a message that's not from this sessions
$scope.chat.search({
event: 'message'
}).on('message', function(payload) {
// render it in the DOM with a special class
addMessage(payload, true);
})
// when this chat gets a message
$scope.chat.on('message', function(payload) {
// render it in the DOM
addMessage(payload, false);
});
})
.controller('OnlineUser', function($scope) {
// create a new chat
$scope.newChat = function(user) {
// define a channel
let chan = user.uuid;
// create a new chat with that channel
let newChat = new $scope.ChatEngine.Chat(chan);
// we need to auth ourselves before we can invite others
newChat.on('$.connected', () => {
// this fires a private invite to the user
newChat.invite(user);
// add the chat to the list
$scope.chats.push(newChat);
});
};
})
.controller('ChatAppController', function($scope) {
// create a user for myself and store as ```me```
$scope.ChatEngine.connect(new Date().getTime(), {}, 'auth-key');
$scope.ChatEngine.on('$.ready', (data) => {
$scope.me = data.me;
$scope.me.plugin(ChatEngineCore.plugin['chat-engine-random-username']($scope.ChatEngine.global));
$scope.ChatEngine.global.plugin(ChatEngineCore.plugin['chat-engine-online-user-search']());
// when I get a private invit
$scope.me.direct.on('$.invite', (payload) => {
let chat = new $scope.ChatEngine.Chat(payload.data.channel);
chat.onAny((a,b) => {
console.log(a)
});
// create a new chat and render it in DOM
$scope.chats.push(chat);
});
// bind chat to updates
$scope.chat = $scope.ChatEngine.global;
// hide / show usernames based on input
$scope.userSearch = {
input: '',
fire: () => {
// get a list of our matching users
let found = $scope.ChatEngine.global.onlineUserSearch.search($scope.userSearch.input);
// hide every user
for(let uuid in $scope.chat.users) {
$scope.chat.users[uuid].hideWhileSearch = true;
}
// show all found users
for(let i in found) {
$scope.chat.users[found[i].uuid].hideWhileSearch = false;
}
}
};
$scope.userAdd = {
input: '',
users: $scope.userAdd,
fire: () => {
if($scope.userAdd.input.length) {
$scope.userAdd.users = $scope.ChatEngine.global.onlineUserSearch.search($scope.userAdd.input);
} else {
$scope.userAdd.users = [];
}
}
};
});
});
<div class="container-fluid" ng-controller="ChatAppController">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-block">
<h4 class="card-title">ChatEngine</h4>
<p class="card-text">Your are {{me.state.username}} with uuid {{me.uuid}}</p>
</div>
<ul id="online-list" class="list-group list-group-flush">
<li class="list-group-item" ng-repeat="(uuid, user) in chat.users" ng-hide="user.hideWhileSearch" ng-controller="OnlineUser">
{{user.state.username}}
<span class="show-typing" ng-show="user.isTyping">is typing...</span>
</li>
</ul>
<div class="card-block">
<form class="send-message" ng-submit="userSearch.fire()">
<div class="input-group">
<input id="usernameSearch" type="text" class="form-control message" placeholder="Search for Username" ng-change="userSearch.fire()" ng-model="userSearch.input">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div id="chats" class="row" ng-repeat="chat in chats" ng-controller="Chat">
<div class="chat col-xs-12">
<div class="card">
<div class="card-header">
<div class="col-sm-6">
{{chat.channel}}
</div>
<div class="col-sm-6 text-right">
x
</div>
</div>
<ul class="list-group list-group-flush online-list-sub">
<li class="list-group-item" ng-repeat="(uuid, user) in chat.users" ng-hide="user.hideWhileSearch" ng-controller="OnlineUser">
{{user.state.username}}
<span class="show-typing" ng-show="user.isTyping">is typing...</span>
</li>
</ul>
<div class="card-block">
<div class="log">
<div ng-repeat="message in messages" ng-class="{'hide-username': message.sameUser, 'text-muted': message.isHistory, 'text-xs-right': !message.isSelf}">
<p class="text-muted username">{{message.sender.state.username}}</p>
<p>{{message.data.text}}</p>
</div>
</div>
<p class="typing text-muted"></p>
<form class="send-message" ng-submit="sendMessage(chat)">
<div class="input-group">
<input ng-model="messageDraft" ng-change="chat.typingIndicator.startTyping()" type="text" class="form-control message" placeholder="Your Message...">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Send</button>
</span>
</div>
</form>
</div>
<hr />
<div class="card-block">
<h6>Add a user to this chat</h6>
<fom ng-submit="userAdd.fire()">
<div class="input-group">
<input id="usernameSearch" type="text" class="form-control message" placeholder="Add User" ng-change="userAdd.fire()" ng-model="userAdd.input">
</div>
</form>
<ul class="list-group list-group-flush online-list-sub">
<li class="list-group-item" ng-repeat="(uuid, user) in userAdd.users" ng-controller="OnlineUser">
{{user.state.username}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Issue is resolved by upgrading to the latest ChatEngine version. As per the ChatEngine github repo issue:
it's working correctly with chat-engine#0.9.5, I was using chat-engine#0.8.4
I'm creating an array in a service and fetch some data from a db and iterative over the data to add the group id as a key in the array
angular.module('tasksApp').
factory("data", ["$http", function ($http) {
var data = {};
data.allTasks = {};
data.today = [];
data.actioned = [];
data.complete = [];
data.todaysNextNumber = 0;
data.groups = [];
data.groupNames = [];
data.nextGroupPosition = [];
data.loadTasks = function () {
return $http({
method: 'GET',
url: '/loadTasks'})
.then(function(response) {
data.allTasks = response.data;
// Get groups & create the arrays
getGroups().then(function(result) {
var allGroups = result;
for (var key in allGroups) {
var group = allGroups[key];
data.groups[group.group_id] = [];
data.groupNames[group.group_id] = group.group_name;
data.nextGroupPosition[group.group_id] = 0;
}
The id's of the data start with 1 and go up to 9.
Then, in the component I load the data to the scope:
angular.module('tasksApp').
component('tasks', {
templateUrl: 'tasks/template.tasks.html',
controller: function startUp($scope, $rootScope, data) {
// Get tasks
data.loadTasks().then(function(response) {
$scope.groups = data.groups;
$scope.today = data.today;
$scope.actioned = data.actioned;
$scope.groupNames = data.groupNames;
console.log($scope.groups);
})
}
});
and use ng-repeat to go over the data in the template:
<!-- Start of Groups -->
<div ng-repeat="(key, group) in groups" class="col-md-3">
<div class="groupBox">
<div ng-attr-id="{{'groupCell-' + key}}" ng-click="showTitleInput(key)">
<h1 ng-attr-id="{{'groupTitle-' + key}}">{{groupNames[key]}} - {{key}}</h1>
<input class="groupTitleInput" ng-attr-id="{{'groupInput-' + key}}" ng-value="groupNames[key]"></input></div>
<div ng-attr-id="{{'div' + key}}">
<div ng-repeat="task in group | orderBy:'position'" ng-attr-id="{{'task-' + task.id}}" class="taskContainer">
<div ng-attr-id="{{'taskText-' + task.id}}" class="taskText" ng-click="displayActionBar = !displayActionBar">{{task.task}}</div>
<div ng-attr-id="{{'actionBar-' + task.id}}" class="actionBar" ng-show="displayActionBar">
<div class="actionButton glyphicon glyphicon-globe todaysTasks" ng-click="displayActionBar = !displayActionBar; addToToday(task.id, task.group_id)"></div>
<div class="actionButton glyphicon glyphicon-ok actioned" ng-click="displayActionBar = !displayActionBar; markAsActioned(task.id, task.group_id)"></div>
<div class="actionButton glyphicon glyphicon-thumbs-up complete" ng-click="displayActionBar = !displayActionBar; markAsComplete(task.id, task.group_id)"></div>
<div class="actionButton glyphicon glyphicon-trash delete" ng-click="displayActionBar = !displayActionBar; deleteTask(task.id, task.group_id)"></div>
<div class="actionButton glyphicon glyphicon-remove cancel" ng-click="displayActionBar = !displayActionBar"></div>
<div class="actionButton glyphicon glyphicon-menu-up up" ng-click="pushUp(task.id, task.group_id)"></div>
<div class="actionButton glyphicon glyphicon-menu-down down" ng-click="pushDown(task.id, task.group_id)"></div></div></div></div>
<form ng-submit="addTask(key)" ><input name={{key}} class="newTaskInput" type="text" ng-model="newTaskDescription" /><form></div></div>
All this works fine but when the data is displayed a div for an '0' element is shown. If I print the array out using console.log it doesn't show a '0' element. Also, if I change the data with the id of 1 to 0 it also iterates over a 1 element. I thought that ng-repeat iterated over the elements in the array using the assigned key, not going from 0 through to the number of elements.
Does anyone know why this is happening?
I'm writing a user settings page in Angular that will be used to update the users profile settings. This is how I've done it (pardon my use of jquery please)
$scope.userObj = {};
var userObjTemp = {};
$http.get('/api/to/get/user').success(function(data) {
if (data.success != true) {
$state.go('index');
} else {
$scope.userObj.user = data.response; //scope variable to show in html form
userObjTemp.user = data.response; //temp data in case someone cancels editing
var tempDob = $scope.userObj.user.dob;
$scope.userObj.user.dob = tempDob.split('-')[2] + '/' + tempDob.split('-')[1] + '/' + tempDob.split('-')[0];
console.log({
userObjData: $scope.userObj
});
console.log({
tempData: userObjTemp
});
}
});
$scope.showSetting = function(target) {
$('.setting-edit-row').hide();
$('.jr-input-setting').show();
$('#' + target + '-input').hide();
$('#' + target).show();
}
$scope.saveSetting = function(key) {
var postDict = {};
postDict[key] = $scope.userObj.user[key];
$http.put('/api/user', postDict).success(function(data) {
$scope.userObj.user = data.response;
$('.setting-edit-row').hide();
$('.jr-input-setting').show();
})
}
$scope.shutSetting = function(target) {
$scope.userObj.user = {};
$scope.userObj.user = userObjTemp.user;
$('#' + target).hide();
$('#' + target + '-input').show();
}
My HTML is as follows:
<div class="row setting-fixed-row">
<div class="col-lg-2">
<div class="setting-label">
Name
</div>
</div>
<div class="col-lg-8">
<input class="jr-input-setting" id="setting-name-input" disabled="true" ng-model="userObj.user.display_name" type="text" placeholder="Display Name">
</div>
<div class="col-lg-2">
<div class="edit-btn" ng-click="showSetting('setting-name')">
Edit
</div>
</div>
<div class="col-lg-12 setting-edit-row" id="setting-name">
<div class="row">
<div class="col-lg-12">
<span class="glyphicon glyphicon-remove shut-det" style="margin-bottom: 5px;" ng-click="shutSetting('setting-name')"></span>
</div>
<div class="col-lg-offset-2 col-lg-8">
<input class="jr-input-edit" ng-model="userObj.user.display_name" placeholder="Display Name" id="display_name" ng-change="showVal()">
</div>
<div class="col-lg-2">
<div class="save-settings" ng-click="saveSetting('display_name')">
Save
</div>
</div>
</div>
</div>
</div>
The idea behind shutSetting() is to shut the editing panel setting-edit-row and restore the original data that I got from the api. However, when I do this, it shows me the temp variable being the same as the $scope.userObj variable. I added a $scope.showVal function to show the variables on change of the input form:
$scope.showVal = function(){
console.log({userObj: $scope.userObj});
console.log({temp: userObjTemp});
}
For some reason, both variables are getting updated. How do I fix this as I've never faced something similar before.
The problem is that you are referencing objects instead of copying them. Thus
$scope.userObj.user = data.response;
userObjTemp.user = data.response;
points all to the same object. Then, when you update one of the two also the other gets updated.
userObjTemp.user = angular.copy(data.response)
this makes a copy.
Just in case: https://jsfiddle.net/qzj0w2Lb/
The problem is, that both of your variables are referencing the same object data.response. Depending on the object, you could use $.extend(true, {}, data.response); to get a clone of the object.
Be aware though, that this is not a true "deep copy" when custom objects are involved!
I've pasted the relevant snippet of my code below.
I know the base angularJS is working because the HTML document doesn't display the {{}} variables, but instead, I get a blank.
I believe it's because it's getting a null value for the variables. When I do a few console.log expression WITHIN the controller, I can see that the value is updated accordingly, but it is different outside the controller.
Code:
<div ng-controller="rangeSort">
<h3>Range Selection</h3>
<div class="row">
<div class="col-md-4">
<h5><b>Observer</b></h5>
<select class="form-control" ng-model="obSelection">
<option value="" >All</option>
<option ng-repeat="observer in observersS" value="{{observer}}">{{observer}}</option>
</select>
</div>
<div class="col-md-4">
<h5> <b>Host</b></h5>
<select class="form-control" ng-model="hostSelection">
<option value="" >All</option>
<option ng-repeat="host in hostsS" value="{{host}}">{{host}}</option>
</select>
</div>
<div class="col-md-4">
<h5> <b>Bug</b></h5>
<select id="chooseBug" class="form-control" ng-model="bugSelection">
<option value="" >All</option>
<option ng-repeat="bug in bugsS" value="{{bug}}" >{{bug}}</option>
</select>
</div>
</div>
<!--div ng-repeat="bugItem in bugsJSONList | filter: obSelection | filter: hostSelection | filter: bugSelection" > {{bugItem.bug}} on {{bugItem.host}} , observer {{bugItem.observer}} </div-->
<div class="row">
<div style="text-align: center; margin-bottom: 15px" ng-repeat="observer in observerKeys | filter: obSelection" >
<h5><b> {{observer}}</b></h5>
<div class="row">
<div class="col-md-6" ng-repeat="host in hostKeys | filter: hostSelection" >
<br> <span style="text-decoration:underline"> Host {{host}} </span>
<div style="text-align: left" ng-repeat="bug in bugsS | filter: bugSelection" >
<div ng-repeat="item in JSONbugsList[observer][host][bug]">{{bug}} from {{item.start}} to {{item.end}}</div>
</div>
</div>
</div>
</div>
</div>
<script>
var summaryApp = angular.module('summaryApp', []);
summaryApp.controller("rangeSort", function($scope) {
hosts =[], observers =[], bugs =[], JSONbugsList =[];
hostKeys = [], observerKeys = [], bugKeys = [];
bugTracker = {};
$.getJSON('../java_output/bug_summary.json', function (data) {
JSONbugsList = data;
var numObservers = data.numObservers;
var bugTracker = {};
for (var observer = 1; observer <= numObservers; observer++) {
observers.push(observer);
observerKeys = Object.keys(data);
observerKeys.splice(observerKeys.indexOf('numObservers'));
for (var host in data["observer" + observer]) {
if (hosts.indexOf(host) == -1) {
hosts.push(host);
}
hostKeys = Object.keys(data["observer" + observer]);
for (var bug in data["observer" + observer][host]) {
if (bugs.indexOf(bug) == -1) {
bugs.push(bug);
}
for (var i in data["observer" + observer][host][bug]) {
bugTracker[bug] = true;
var dateVar = data["observer" + observer][host][bug][i];
var intoList = {"observer":observer, "host":host, "bug":bug, "start":(new Date(1000*dateVar.start)), "end":(dateVar.end==null?' the end.':(new Date(1000*dateVar.end)))}
}
}
}
}
console.log ("host keys " + hostKeys);
var overviewVars = ['Congestion','Highlatency','LownumOIO'];
var overviewSpaceVars = ['Congestion','High latency','Low numOIO'];
for (var i in overviewVars) {
console.log (overviewVars[i]);
$('#' + overviewVars[i] + 'Content' ).append ('<p>There are' + ((bugTracker[overviewSpaceVars[i]])?' errors in ':' no errors in ') + overviewVars[i] + '.</p>');
$('#' + overviewVars[i] + 'Content' ).append ('<button type=\"button\" class=\"btn\" onclick=\"displayRanges('+overviewSpaceVars[i]+')\">View Bug Ranges</button>');
}
function displayRanges (bug) {
$('#chooseBug').val(bug);
}
//console.log(bugsCounter);
for (var i = 1; i <= numObservers; i++) {
$('#links').append('Observer ' + i + ' ');
if (i != numObservers) {
$('#links').append(' - ');
}
}
$scope.hostsS = hosts;
$scope.bugsS = bugs;
$scope.observersS = observers;
$scope.JSONbugsList = JSONbugsList;
$scope.hostKeys = hostKeys;
$scope.observerKeys = observerKeys;
$scope.start = 'start';
$scope.end = 'end';
});
});
</script>
<hr>
</div>
getJSON is not an Angular call, therefore triggers no digest cycle, therefore never updating your view. It's not a good idea to mix Angular and jQuery because of this. Angular comes with jqLite - a smaller subset of jQuery functions.
Your data call should be using $http to keep within the digest cycle - a quick workaround would be to call $scope.$apply() at the end of your code to trigger a digest cycle, however refactoring to use Angular dependencies would be the best choice of action.