Angular variables not updating outside loop

Angular variables not updating outside loop - javascript

So I'm running into a weird issue with Angular where I created a raw predefined object to loop through card stats for a card game I am working on.
$scope.attack = 500;
$scope.defense = 500;
$scope.cardPowers = [
{
name: "balanced",
attack: 2500,
defense: 1500,
cost: 3
},
{
name: "high-offense",
attack: 2500,
defense: 1000,
cost: 5
},
{
name: "base-offense",
attack: 1800,
defense: 1000,
cost: 4
}
];
This is all in the main controller where most of my functionality is going through. I'm looping through them and creating buttons where someone can choose the attributes for the car like so:
<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
<ul>
<li>SAVE <i class="fa fa-floppy-o"></i></li>
<li>EDIT <i class="fa fa-pencil-square-o"></i></li>
<li>CLOSE <i class="fa fa-times"></i></li>
</ul>
<!-- <i class="fa fa-file-image-o"></i> Save as Image -->
</div>
<div ng-show="editing" class="options">
<h4>Choose Power</h4>
<p ng-repeat="power in cardPowers">{{power.name | uppercase}} {{attack}}</p>
<h4>Thumbnail Positioning</h4>
<!-- repeat card positioning -->
</div>
<div ng-show="gotComics">
<?php include('flip-container-code.php'); ?>
</div>
Mostly everything works fine, however, when I click on my button to set the new attack, it only updates {{attack}} inside the loop, and not outside. See this screencast to see what I am talking about: http://screencast.com/t/0ZukLLYqtUYM
Not sure why this is happening, did some research and it seems I am doing this all right, so it's odd. Note: Everything else is actually working just fine, my card saving function, seeing the default attack and defense values, the models, etc.

To start, you should move the implementation details outside of the view (i.e., you shouldn't be directly setting model.attack = power.attack in the view, that should be at least one level deeper, in the controller). With that, moving this to the controller will resolve your issue itself.
Your view can look like this:
<p ng-repeat="power in cardPowers">
<a href="" ng-click="setAttackPower(power)">
{{power.name | uppercase}} {{attack}}
</a>
</p>
And in your controller:
$scope.setAttackPower = function(power) {
$scope.attack = power.attack;
}

If I understand your problem right, try to put the attack property inside an object. This is because when you do attack = power.attck inside ng-repeat you are creating a new property on the child scope created by the ng-repeat instead of changing the value of the attack on the parent scope.
In your controller:
$scope.model = {attack: 500};
And your html:
<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{model.attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
<ul>
<li>SAVE <i class="fa fa-floppy-o"></i></li>
<li>EDIT <i class="fa fa-pencil-square-o"></i></li>
<li>CLOSE <i class="fa fa-times"></i></li>
</ul>
<!-- <i class="fa fa-file-image-o"></i> Save as Image -->
</div>
<div ng-show="editing" class="options">
<h4>Choose Power</h4>
<p ng-repeat="power in cardPowers">{{power.name | uppercase}} {{model.attack}}</p>
<h4>Thumbnail Positioning</h4>
<!-- repeat card positioning -->
</div>
<div ng-show="gotComics">
<?php include('flip-container-code.php'); ?>
</div>
See here for further explanation.

Try to accest the parent and it should work
Like this on ng-click:
<p ng-repeat="power in cardPowers">{{power.name | uppercase}} {{attack}}</p>

Related

Change style of an element in a forEach loop

Goal: Change style of an element in a forEach loop
Issue: Style not being applied
In my loop, if I console.log(element), I do get the right list of filtered elements.
Running this works, but I want my function to modify every element that match my filter:
let contentPreview = document.querySelectorAll('.o_last_message_preview');
contentPreview[0].style.color = 'yellow'
All elements are correctly assigned.
function changeNotificationColor() {
// Notification button that opens list of notifications
let notifyButton = document.querySelector('.dropdown-toggle.o-no-caret[title="Conversations"]');
notifyButton.addEventListener('click', function () {
// List of notifications - each notification is contained in a .o_last_message_preview class
let contentPreview = document.querySelectorAll('.o_last_message_preview');
contentPreview.forEach(function (element) { if (element.innerText.includes('Marine')) {element.style.color = 'yellow'}})
})
}
changeNotificationColor();
HTML Notifications Dropdown button:
<a class="dropdown-toggle o-no-caret" data-toggle="dropdown" data-display="static" aria-expanded="true" title="Conversations" href="#" role="button">
<i class="o_mail_messaging_menu_icon fa fa-comments" role="img" aria-label="Messages"></i> <span class="o_notification_counter badge badge-pill">366</span>
</a>
HTML template of a notification node (each notification creates one of these nodes):
<div class="o_preview_info">
<div class="o_preview_title">
<span class="o_preview_name">
You have been assigned to Backorder xx
</span>
<span class="o_preview_counter">
(1)
</span>
<span class="o_last_message_date ml-auto mr-2"> 3 minutes ago </span>
</div>
<div class="o_last_message_preview">
Marine
</div>
<span title="Mark as Read" class="o_discuss_icon o_mail_preview_mark_as_read fa fa-check"></span>
</div>

I don't know what your issue is, but it's not in the code that you showed; this works fine:
let contentPreview = document.querySelectorAll('.o_last_message_preview');
contentPreview.forEach(function (element) { if (element.innerText.includes('Marine')) {element.style.color = 'yellow'}})
<div class="o_last_message_preview">This contains Marine</div>
<div class="o_last_message_preview">This does not</div>
<div class="o_other_message_preview">This has a different class</div>

Problem selecting correct value from array and assigning to variable

Problem:
I am writing a tracking electron app where the user data is stored on a local JSON file. Essentially i have the cards (user info from json) loaded to display via html. My next step is to run the python backend, problem i am having is I currently can't load the correct array value, only the last one is currently loading into a variable that im trying to pass to python. Since im using forEach i shouldn't have to count or do i still need to do that?
What I expect to happen:
I want an alert to pop up with the current user.handle value. What happens now is it only pops up the last value in the array regardless of which card i press. How can i make each button press trigger the corresponding handle value?
When i test and swap out onclick="myFunction11()" with onclick=alert('${user.handle}') it prints the correct handle value. So i can assume i am just overwriting var city every time and left with the last one in the array. Any advice on how to correctly have myFunction11 pull the corresponding handle value i would love. thanks
Question:
How can i correctly have myFunction11 pull the correct handle value from the array? or is there a better way to achieve this?
Code:
$(document).ready(function() {
users.forEach(function(user) {
$('.team').append(`<div class="card">
<figure>
<img src="${user.image}" />
<figcaption>
<h4>${user.name}</h4>
<h5>${user.handle}</h5>
</figcaption>
</figure>
<div class="links">
<i class="fa fa-pencil"></i>
<i class="fa fa-truck"></i>
<i class="fa fa-trash-o"></i>
</div>
<div class="task">
<div>
</div>
</div>
<div class="bottom-links">
<i class="fa fa-pencil"></i> EDIT
<i class="fa fa-truck"></i> TRACK
</div>
</div>
<script>
function myFunction11() {
var city = '${user.handle}';
alert(city);
}
</script>
`);
});

Adding duplicates of the same function is indeed bad practice. Your way when you have three users you will have defined function myFunction11 three times. And in fact (as you guessed) you end up with the function only having the last value of city.
Instead, this should be better:
$(document).ready(function() {
$('.team').append(`<script>
function myFunction11(city) {
alert(city);
}
</script>`);
users.forEach(function(user) {
$('.team').append(`
...
<i class="fa fa-pencil"></i>
...`);
});

define function outside loop and pass user index as parameter
function myFunction11(index) {
var city = users[index].handle;
alert(city);
}
$(document).ready(function() {
users.forEach(function(user,i) {
$('.team').append(`<div class="card">
<figure>
<img src="${user.image}" />
<figcaption>
<h4>${user.name}</h4>
<h5>${user.handle}</h5>
</figcaption>
</figure>
<div class="links">
<i class="fa fa-pencil"></i>
<i class="fa fa-truck"></i>
<i class="fa fa-trash-o"></i>
</div>
<div class="task">
<div>
</div>
</div>
<div class="bottom-links">
<i class="fa fa-pencil"></i> EDIT
<i class="fa fa-truck"></i> TRACK
</div>
</div>`);
});
});

get data from a ngrepeated div to another div on click

<div ng-app="appPage" ng-controller="appController">
<div class="nav">
<h1 class="logo">Todlio</h1>
<i class="icon setting" style="color:#fff;font-size:1.8em;;position:absolute;top:11px;right:12px;"/></i>
</div>
<div class="todo">
<div class="todo_column">
<div style="font-weight700;text-align:center; margin:20px;">
<a href="#/add" ng-click="addTodo()" class="ui basic button">
<i class="add square icon"></i>
Add
</a>
</div>
<ul>
<a href="#/"><li ng-href="#/" ng-click="detail($index)" ng-repeat="todo in todos">
<h3 ng-model="title">{{ todo.title }}</h3>
<h6>{{ todo.note_date }}</h6>
</li></a>
</ul>
</div>
<div class="todo_full">
<div class="todo_title" ng-scope="todo in todos">
<span><h1>{{ title }}</h1></span>
<span class="check">
<i style="font-size:2em;" class="square outline icon"></i>
<i class="write icon" style="font-size:1.8em;"></i>
</span>
</div>
<h4>Note:</h4>
<p class="todo_note">{{ note }}
</p>
</div>
</div>
</div>
Controller
app.controller("appController", function ($scope) {
$scope.todos = [
{title: "Call Vaibhav", note: "", note_date: ""},
{title: "Grocery", note: "Lemons, Apple and Coffee", note_date: ""},
{title: "Website design for Stallioners", note: "UI/UX on xyz#mail.com", note_date: ""},
{title: "Fill MCA form", note: "First search for all the colleges", note_date: "" }
];
$scope.detail = function(x){
$scope.todos.title = $scope.title;
$scope.todos.note = $scope.note;
};
I want to get the clicked list item title and the note attached to it to the different div below
Can anybody please help. Its a todo app the left half has the list to todos and the right half has a note attached to it or anything checked or not.

There are a few ways to do this. One easy way is as follows:
Define a $scope variable with a name like $scope.currentTodo.
In the repeat loop, the ng-click would set $scope.currentTodo=todo
This current variable will hold the todo object so you can use {{ $scope.currentTodo.title }} in place of {{title}}
Ditch the ng-scope

angular looping with scope variables in same controller

I have 2 scope variables like the following:
$scope.degrees =[{DegreeCategoryID:"1",DegreeCategory:"Accounting",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"2",DegreeCategory:"Advanced Manufacturing/Mechatronics Technology",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"3",DegreeCategory:"Air Conditioning and Refrigeration Technology",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"4",DegreeCategory:"Auto Body Technology",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"78",DegreeCategory:"Associate in Sciences",DegreeCategoryType:"Academic"},
{DegreeCategoryID:"79",DegreeCategory:"Associate of Arts in Teaching",DegreeCategoryType:"Academic"},
{DegreeCategoryID:"80",DegreeCategory:"Emphasis",DegreeCategoryType:"Academic"},
{DegreeCategoryID:"81",DegreeCategory:"Field of Study",DegreeCategoryType:"Academic"}];
$scope.degreecategories=[{DegreeID:"1",DegreeCategoryID:"1",Degree:"Accounting AAS ",DegreeTypeID:"2",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
{DegreeID:"2",DegreeCategoryID:"1",Degree:"Accounting Assistant Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
{DegreeID:"3",DegreeCategoryID:"1",Degree:"Accounting Clerk Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
{DegreeID:"4",DegreeCategoryID:"1",Degree:"Advanced Technical Certificate in Professional Accountancy",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
{DegreeID:"5",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"6",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
{DegreeID:"7",DegreeCategoryID:"3",Degree:"Air Conditioning and Refrigeration Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"8",DegreeCategoryID:"3",Degree:"Profit Center Manager Enhanced Skills Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"9",DegreeCategoryID:"3",Degree:"Residential - Technician I Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"10",DegreeCategoryID:"3",Degree:"Residential - Technician III Level II Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"11",DegreeCategoryID:"3",Degree:"Residential AAS ",DegreeTypeID:"2",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"12",DegreeCategoryID:"4",Degree:"Auto Body Metal Technician Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""}];
Both my above variables are present in the same controller. I am trying to display data in such a way that, when i click a button named 'Academic', it displays all the DegreeCategoryType:"Academic" variables from $scope.degrees using a filter.(until here it works fine)
Now i wanted to display another list following the previous list based on the selection i make from within the list ie. when i click one selection from the above made list, i wanted to to display the details from my $scope.degreecategories such that the it matches and filters based on the DegreeCategoryID. How do i approach this issue? i already posted this question but the message i tried to convey was not proper.

MARKUP Masterlist
<div ng-show="display.academic" class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
<div class="panel-heading">
<h3 class="panel-title">Academic</h3>
</div>
<a href='#' ng-repeat="degree in degrees | filter:{DegreeCategoryType:'Academic'}" class="list-group-item">
<li ng-click="showAcademic(degree)" >{{degree.DegreeCategory}}</li>
</a>
</div>
</div>
Markup sublist
<div ng-show="display.academiccourse" class="col-lg-9 col-md-9 col-sm-9">
<div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
<div class="panel-heading">
<h3 class="panel-title">{{DegreeCategory}}</h3>
</div>
<a href='#' ng-repeat="degree in degreecategories | filter:{DegreeCategoryID:filterSub}" class="list-group-item">
<li ng-click="display.appliedsciencescourse" >{{degree.Degree}}</li>
</a>
</div>
</div>
JS
$scope.showAcademic = function(degree){
$scope.DegreeCategory = degree.DegreeCategory;
$scope.filterSub = degree.DegreeCategoryID;
$scope.display.academiccourse = true;
};

<a href='#' ng-repeat="degree in degrees | filter:{DegreeCategoryType:'Applied Sciences'}" class="list-group-item">
<li ng-click="display.appliedsciencescourse" >{{degree.DegreeCategory}}</li>
</a>
I cant see that your ng-click actually does anything. If your ng-click calls a function, applying the element clicked on as a parameter, then you can set $scope.selectedCategory = yourcategory, on your second list, you can filter by selectedCategory, that will exist in the scope.

How to do a foreach binding using KnockoutJS in Bootstrap-themed dropdown

I'm developing a small notifications-like module, where the user can see his 5 latest activities that are logged in the DB (MSSQL). The values that I need are all there, but for some reason knockout binding is not working. Here are code snippets:
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>
For now, I only want to display random text for every item that is in the observableArray.
ViewModel is the following:
var layoutLogsModel = {
notification: ko.observableArray()
};
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data);
});
}
And every time I call this function, the list is empty (IMAGE)
(the function is called on click, and absolutely no errors are shown in the console).
What is it that I am doing wrong?
EDIT:
The thing was, I forgot to execute ko.applyBindings for that viewModel. Then, I changed the HTML to look like this:
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-user" style="color: green;"></i>
<span data-bind="text: $data"></span>
</a>
</div>
</ul>
Aslo, I modified the get function slightly, like this:
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data.Notification);
});
}
(changed data to data.Notification based on the MVC model property that contains the array)
After all that, the data was available immediately.

try removing the layoutLogsModel from the foreach, you are already using it with the binding "with", so eveything in that div will be part of layoutLogsModel.
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Angular variables not updating outside loop - javascript

Try to accest the parent and it should work Like this on ng-click: <p ng-repeat="power in cardPowers">{{power.name | uppercase}} {{attack}}</p>

Related

Change style of an element in a forEach loop

Problem selecting correct value from array and assigning to variable

get data from a ngrepeated div to another div on click

angular looping with scope variables in same controller

How to do a foreach binding using KnockoutJS in Bootstrap-themed dropdown

Categories

Resources