How to make Stylus to see the variable that has been initialized in other scope? - stylus

In SASS:
.DocumentationArticle
$DocumentationArticle-Heading__TopLevel--Selector: null
&-Heading
&__TopLevel
$DocumentationArticle-Heading__TopLevel--Selector: &
&__Section
#debug($DocumentationArticle-Heading__TopLevel--Selector) // OK: ".DocumentationArticle-Heading__TopLevel"
In Stylus, in variable value has been changed, this change visible only in scope where it has been changed:
.DocumentationArticle
DocumentationArticle-Heading__TopLevel--Selector = null
&-Heading
&__TopLevel
DocumentationArticle-Heading__TopLevel--Selector = selector()
&__Section
warn(DocumentationArticle-Heading__TopLevel--Selector) // null!
How to make DocumentationArticle-Heading__TopLevel--Selector new value visible in &__Section scope?
🌎 Fiddle

Related

In Pug, how to use a variable outside (set for global use) the each loop it is created in?

Below, I'm trying to get the personRef variable inside (locally set scope) the pug each loop of person in persons to come out. That way on the following line PersObj which I need for each object loop it's a part of can use the personRef variable from the loop right above. Basically, I need the local scope in the loop to be set globally outside the loop.
each object in objects
- var objNum = objects.indexOf(vehicle)+1
- var personRef=person.object_ref
each person in persons
- var personNum = persons.indexOf(driver)+1
if (some condition) && (object.person_ref == objNum)
- var personRef=object.person_ref
- break
else if (condition)
- var personRef= personNum
else if (condition)
- continue
PersObj(id = "O"+objNum, PersonRef = "P"+personRef)
its hard to understand what exact behavoir you want to achieve but i will try.
"- var personRef = something" defines a variable. you only need this once in your code. if you define it outside of a loop, you can also use it inside. if you have "- var personRef = something" again inside the loop, you "overwrite" it with a variable that can only be used within the loops scope. you can always reassign a variables value like this: "personRef = somethingElse" with out using the "- var".
so it should probably look smth like this:
each object in objects
- var objNum = objects.indexOf(vehicle)+1
- var personRef=person.object_ref // define the variable here
each person in persons
- var personNum = persons.indexOf(driver)+1
if (some condition) && (object.person_ref == objNum)
- personRef=object.person_ref // here you dont need var, because you only reassign a value
- break
else if (condition)
- personRef= personNum // here as well
else if (condition)
- continue
PersObj(id = "O"+objNum, PersonRef = "P"+personRef)
besides that, i cant really tell what the code is supposed to do, can you please elaborate what that code is supposed to do. please also explain:
what is "objects"
what is "persons"
what is "vehicle"
what is "driver"

How to use Group by query in laravel?

this is how the data is displayed but i want
Rhugveda desai -> flowers,Sarees,Prasad
In my application i need to use group by clause . But i am getting a syntax error.Also, What should i do if i want quantity column to be multiplied by amount to get the total? My tables are inkind and inkind_items, where inkind.id is foreign key in inkind_items table as inkind_id.
SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #11
of SELECT list is not in GROUP BY clause and contains nonaggregated
column
my inkind_items tabel is inkind_items
my inkind table is inkind
My query is:
$inkinds = DB::table('inkind')
->join('inkind_items', 'inkind.id', '=', 'inkind_items.inkind_id')
->select('inkind.*', 'inkind_items.*')
->groupBy('inkind_items.inkind_id')
->get();
Try using group_concat()
$inkinds = DB::table('inkind')
->join('inkind_items', 'inkind.id', '=', 'inkind_items.inkind_id')
->select('inkind.*', DB::raw('group_concat(inkind_items.name) as items'))
->groupBy('inkind_items.inkind_id')
->get();
Here I'm assuming inkind have field name and inkind_items has fields items.
You can use Laravel collection methods for that.
Just call:
$inkinds->groupBy('inkind_id');
after ->get(). Considering that inkind_id is unique column for both tables
Hi. You asked another question earlier today (about displaying an input when a particular checkbox is checked) but deleted it before I submitted my answer, so I thought I would paste the answer here instead:
Just to get you started, here is an explanation of how to use
addEventListener and createElement to achieve your desired result.
If any part of it is still unclear after studying the code and the
accompanying comments, please search for the name of the still-unclear function on
MDN.
(For example, https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName.)
// Sets `box1` to refer to the first element on the page with the class "box".
const box1 = document.getElementsByClassName("box")[0];
// Sets `container` to be the element whose id attribute has the value "container".
// (This is where our new input element, inside a new label element, will be added.)
const container = document.getElementById("container");
// Begins listening for clicks. From now on, whenever the user clicks anywhere
// on the page, our listener will call the `noticeClick` function.
document.addEventListener("click", noticeClick);
function noticeClick(event){
// Because this function's name is the second argument in
// the call to `document.addEventListener`, above, it is
// automatically called every time a 'click' event happens on the
// page (and it automatically receives that event as an argument.)
// The "target" of the event is whatever the user clicked on.
// So we set the variable `targ` to refer to this target, and we check whether:
// 1) the clicked target is our checkbox,
// 2) this click caused the checkbox to gain the "checked" attribute, and
// 3) we have not already given the checkbox the "added" class
const targ = event.target;
if(targ.id == "box1" && targ.checked && !targ.classList.contains("added")){
// If all three conditions are met, we...
// ...set two variables, `label` and `val`
const label = event.target.id;
const val = event.target.value;
// ...call the `createInput` function, passing these variables as its two arguments
createInput(label, val);
// ...give the checkbox the "added" class (so we can avoid accidentally adding it again)
targ.classList.add("added");
}
}
function createInput(newLabel, newValue){
// When the user has checked our checkbox, the `noticeClick` function
// will call this function, which receives two arguments (which we can
// see, by examining the `noticeClick` function, are two strings: the
// `id` attribute of box1 and the `value` attribute of box1.)
// We use `document.creatElement` to create an `input` element and a
// `label` element, and `document.createTextNode` to set some text
// to be used in the label (using the "newLabel" argument.)
const myInput = document.createElement("input");
const myLabel = document.createElement("label");
const myLabelText = document.createTextNode(newLabel + " ");
// We set our new `input` element's value using the "newValue" argument.
myInput.value = newValue;
// We use `appendChild` to put both the text and the input element
// inside the label, and to put the label inside `container`.
myLabel.appendChild(myLabelText);
myLabel.appendChild(myInput);
container.appendChild(myLabel);
}
// This process can be applied to multiple checkboxes on the same page
// by adding a loop inside the `noticeClick` function, where the string
// "box1" should be replaced with a variable that can refer to the id of a
// different checkbox's `id` for each iteration of the loop.
<label>
<input type="checkbox" id="box1" class="box" value="value1" />
Label for box1
</label>
<hr />
<div id="container"></div>

ngModel and resetting value

So have two directives that need to share data. Both are under the same controller, so set up the variable $scope.selection to store the selection, it gets a default value in the controller.
knowledge.controller('industryController', function($scope, mwFactory){
$scope.menudata={sections: [
{group: 'FMP', name: 'Finance'},
{group: 'FinTech', name: 'Financial Technology'},
]
}
if ($scope.selection) {
console.log("This is " + $scope.selection)
} else {
$scope.selection = 'Main_Page'
}
})
I then send that to a menu where you can make selection
<nav-circle group="section.group" ng-model="selection"></nav-circle>
I then set it as follows inside the directive
function nodeclick(d){
//console.log("Name is " + d.url);
console.log("Old model is " + ngModel.$modelValue)
ngModel.$modelValue = d.url;
ngModel.$viewValue = d.url;
console.log("New model is " + ngModel.$modelValue)
}
However, it does not seem like it is updating, or potentially even weirder, that something is resetting ngModel.
Got a call further up,
ngModel.$render = function () {
console.log("ngRender got called " + ngModel.$modelValue);
};
And this kicks off every minute or so, and always returns the value to the original value. What am I missing
OK, this may not be the best way, but it works, and sometimes that is enough:)
Instead of sending a variable I sent an object, and I think (someone who knows angular and javascript better may be able to explain/confirm) this means that the directive will be writing to a memory address rather than to a variable. Which also means that the ng-model will not change (the memory address is the same, the data stored at that memory address is changed).
Might be wrong, but the solution works as if that was the case.
So, define the scope variable:
$scope.selection = {};
$scope.selection.default = 'Main_Page'
$scope.selection.current = '';
Then send the following to the directives:
<nav-circle group="section.group" ng-model="selection.current"></nav-circle>
And to change the scope variable in the directive you just set viewValue
ngModel.$setViewValue(d.url);
As I mentioned, I am not certain if this is the right way, or if my understanding is correct, but it works:)

Find object where value is equal to set value

I have a scope $scope.moviesCheck that contains many objects. I would like to return one object inside that scope that equals a value in another scope.
For example, In my $scope.moviesCheck I have 8 objects. Each object in that scope has a string called movie_id with values 1-8.
I also have a scope $scope.movieListID.id. This scope has a value of 1-8. Now I want to check the $scope.moviesCheck scope, to find a object that has the same string value as $scope.movieListID.id and then return that object.
Try like this
var objList=$scope.moviesCheck.filter(function(x){ return x.movie_id == $scope.movieListID.id; });
var obj = objList.length > 0 ? objList[0] : {};
console.log(obj);

rootScope is upating on scope variable update

I have created a rootScope variable like
$rootScope.globalData = data;
$rootScope.globalData.chillerConditions.HeatSource.Value = "ST"; //Default Value
$scope.chillerConditions.HeatSource.Value = 1; //Default Value
where data is my returning value from api. Also create a scope variable which is a object contains a list of items.
$scope.chillerAttributes = data.ObjCandidateListChillerAttributes;
$scope.chillerConditions = data.ObjCandidateListConditions;
On HTML I have:
<select ng-model="chillerConditions.HeatSource.Value" style="width:53%;" ng-options="item.Id as item.Description for item in ValidRatingHeatSource" ng-change="heatSourceChanged()" id="ddRatingHeatSource" class="form-control search-select designComboboxHeight" data-container="body"></select>
Here ValidRatingHeatSource is
$scope.ValidRatingHeatSource = \*list of items*\
On change of Drop Down I have written an function. In that
if($scope.chillerConditions.HeatSource.Value == 2)
{
$rootScope.globalData.chillerConditions.HeatSource.Value = "HW";
}
else
{
$rootScope.globalData.chillerConditions.HeatSource.Value = "ST";
}
Till now was the my current code.
Issue is :
When the above function is called then whenever current $rootScope varible i.e. $rootScope.globalData.chillerConditions.HeatSource.Value is changed to "HW" or "ST" it also changing $scope.chillerConditions.HeatSource.Value to "HW" or "ST".
Why so?
Is there any inbuilt functionality in angularjs?
Please suggest if I am making any mistake? New suggestion are also welcome.
This behavior is the way JavaScript works and has nothing to do with AngularJS. JavaScript is an object-oriented (prototype-based) language where objects are addressed by reference and not by value. E.g. assign car2 to car1 and both of them will reference the same object (JSFiddle)
var car1 = {make: "Audi"}
var car2 = car1;
car2.make = "Toyota";
So in your case, $rootScope.globalData.chillerConditions.HeatSource and $scope.chillerConditions.HeatSource are the same object.
Rather, it seems like you want to create a copy. You can do so with angular.Copy
$scope.chillerAttributes = angular.copy(data.ObjCandidateListChillerAttributes);
$scope.chillerConditions = angular.copy(data.ObjCandidateListConditions);
In your example u have both ng-model and ng-change, so:
1. User change value in select.
2. $scope.chillerConditions.HeatSource.Value changes (ng-model)
3. heatSourceChanged starts (ng-change) -> $rootScope.globalData.chillerConditions.HeatSource.Value changes
So everything works as should...

Resources