We Keep Coding

Append CSS class to element

I have a model, i.e. like this:
[{
"Name" : "Foo",
"CssClass" : "class1"
},
{
"Name" : "Bar",
"CssClass" : "class2"
}]
Which is presented using the following template:
<li v-for="foobar in model">
<span class="otherclass anotherclass">{{foobar.Name}}</span>
</li>
How could I append the CssClass property to the span?
I know you could do :class="{ active: isActive }" (as per the documentation), but this uses a predefined class called active, whereas I want to append the class name from the model.
I tried using <span class="otherclass anotherclass" :class="foobar.CssClass"> but that didn't add CssClass to class at all.
How could I go about making this work so that the <span> will effectively be rendered as <span class="otherclass anotherclass class1"> (for the first model entry)? And how could I also use a default value in case CssClass is not defined?

You can append the class like so
<li v-for="foobar in model">
<span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}}</span>
</li>
I ran into the same issue in the past. During render all three classes will combine into one class="my_class_from_foobar otherclass anotherclass"

You can pass an object or an array to :class. You can also use class and :class together and Vue will resolve both correctly without issues:
<li v-for="foobar in model">
<span class="otherclass anotherclass" :class="[foobar.CssClass]">{{foobar.Name}}</span>
</li>

<li v-for="foobar in model">
<span :class="'otherclass anotherclass ' + foobar.CssClass">{{foobar.Name}</span>
</li>
<li v-for="foobar in model">
<span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}</span>
</li>
Both should work

use expression as ng-class in angular js

I have unordered list in which I want different different class for each li which will be dynamic.
my code is
$scope.className = ['clr1','clr2','clr3','clr4','clr5'];
My Html :
<div>
<ul>
<li ng-repeat="item in mainitem" ng-style="{color: color[$index]}" >
<span ng-class="{className [$index]}">{{ item.name}}</span> // At this line I ahve added dynamic class but its not working
</li>
</ul>
</div>
This is not applied class as per classname array !!
Is there any issue with this code ? Thanks for helping !!

you can use [] instead of {}
<div>
<ul>
<li ng-repeat="item in mainitem" ng-style="{color: color[$index]}" >
<span ng-class="[className[$index]]">{{ item.name}}</span>
</li>
</ul>
</div>
for example of working see this codepen codepen

As the code is posted in the question, you are missing an opening brace when evaluating the class name
<span ng-class="{className [$index]}">{{ item.name}}</span>
should be
<span ng-class="{{className [$index]}">{{ item.name}}</span>
when it doesn't evaluate, you will end up with no class at all

how to identify specific list element field and set its displaying objects's property to true

So using *ngFor i displayed the list of name property of object, this object also has a property named isAvailable I want to set isAvalable property to toggle between true and false when I click on it, and based on isAvalible a text next to li will display is available or not
<p>Authors</p>
<ul>
<li *ngFor='let author of authors' (click)='onClick()'>
{{author.name}}
</li>
</ul>

As I understand you want this
<p>Authors</p>
<ul>
<li *ngFor='let author of authors'>
<span [hidden]='author.isAvalible'>{{author.name}}</span>
<span (click)='author.isAvalible = !author.isAvalible '>author.isAvalible</span>
</li>
</ul>

<p>Authors</p>
<ul>
<li *ngFor='let author of authors'>
<span [hidden]='author.isAvalible'>{{author.name}}</span>
<span (click)='onClick()'>author.isAvalible</span>
</li>
</ul>
onClick(value){
value=!value;
}

AngularJS - Disable ng-click if element has specific class

I have a list of li items with functions attached to them. I also have an event listener which attaches a class of "current" to whichever li item is being clicked.
HTML
<ul class="cf" id="filter">
<li ng-click="getRadius(5)" class="current">5 km</li>
<li ng-click="getRadius(10)">10 km</li>
<li ng-click="getRadius(25)">25 km</li>
<li ng-click="getRadius(50)">50 km</li>
<li ng-click="getRadius(100)">100 km</li>
</ul>
Is there a way to disable the ng-click event if that specific li item has a class of "current" or is there a better way to go about this?

You cannot disable a list cause its not a interactive element can use ngClass to apply a specific class when disabled to make it appear disabled:
<li ng-class="{'disabled':condition}"ng-click="getRadius(5)">item</li>
You can use ng-if to remove those items completely from the list:
<li ng-if="!condition" ng-click="getRadius(5)">item</li>
<li ng-if="condition" >item</li>

If you use button tag as trigger instead of li, you can use ng-disabled directive to permit click by a condition. For example:
<ul class="cf" id="filter">
<li><button ng-click="getRadius(5)" ng-disabled="current!=5">5 km</button></li>
<li><button ng-click="getRadius(10)" ng-disabled="current!=10">10 km</button></li>
<li><button ng-click="getRadius(25)" ng-disabled="current!=25">25 km</button></li>
<li><button ng-click="getRadius(50)" ng-disabled="current!=50">50 km</button></li>
<li><button ng-click="getRadius(100)" ng-disabled="current!=100">100 km</button></li>
</ul>
If you want, you can customize button style and you can show it like a standart text element.
.cf button {
border: none;
background: none;
}

// template
<ul class="cf" id="filter">
<li ng-click="!clickLi[5] && getRadius(5)" class="current">5 km</li>
<li ng-click="!clickLi[10] && getRadius(10)">10 km</li>
<li ng-click="!clickLi[25] && getRadius(25)">25 km</li>
<li ng-click="!clickLi[50] && getRadius(50)">50 km</li>
<li ng-click="!clickLi[100] && getRadius(100)">100 km</li>
</ul>
// controller
function MyController($scope) {
$scope.clickLi = {
5: true
};
$scope.getRadius = function(li_id) {
$scope.clickLi[li_id] = true;
console.log(li_id);
};
}
A demo on JSFiddle.

Possible workaround:
If you need a single selection you can add variable into the scope specifying which row is selected and generate your list with the ng-repeat, then you can add lazy checking on ng-click if current $index is equal to selected index, you can use the same condition to apply current class with ng-class.
For example:
app.js
$scope.selected = 0;
$scope.distances = [5, 10, 25, 50, 100];
app.html
<ul class="cf" id="filter">
<li ng-repeat = "distance in distances" ng-click="($index == selected) || getRadius(distance)" ng-class="{'current':($index == selected)}">{{distance}} km</li>
</ul>

how to use set_id to rename node_id in jstree?

this is my rename function, none of the options i've tried work, i do know, that set_id is the function to use but how?
$('#jstree').on('rename_node.jstree', function (node,obj) {
var node_id = "calculated"// calculate node_id
// tried the following 3 options ..
....
$('#jstree').jstree(true).set_id(obj,node_id); //not working
obj.instance.set_id(this,node_id)// not working either
obj.instance.set_id(obj,node_id)//nope..
So how do i set the node_id in jstree?

I looked at the API http://www.jstree.com/api/#/?q=rename&f=rename_node.jstree, and I think you have to use obj.node.
$('#jstree').jstree(true).set_id(obj.node,node_id);
obj.text should contain the new name of the node, and obj.old the old name of the node.
EDIT: The link to the API documentation does not match the code example.
Here are the correct links:
To set the ID of a node: https://www.jstree.com/api/#/?f=set_id(obj,%20id)
To rename the node (set the text value): https://www.jstree.com/api/#/?f=rename_node(obj,%20val)

The first parameter you called node is actually the event object
Example creating a node then updating his autogenerated id
$('#jstree').on('create_node.jstree', function (e, obj) {
#...
$(this).jstree(true).set_id(obj.node, 42);
}

Try the following inside your on.() function:
$(this).attr("id", node_id);

Just set property id on the element you´re using to create the nodes.
<div id="jstree">
<ul>
#foreach($feelings as $feeling)
<li id="{{{$feeling->id}}}">{{{$feeling->name}}}
<ul>
#foreach($feeling->children as $feeling_children)
<li id="{{{$feeling_children->id}}}">{{{$feeling_children->name}}}
<ul>
#foreach($feeling_children->children as $feeling_children2)
<li id="{{{$feeling_children2->id}}}">{{{$feeling_children2->name}}}
<ul>
#foreach($feeling_children2->children as $feeling_children3)
<li id="{{{$feeling_children3->id}}}">{{{$feeling_children3->name}}}
<ul>
#foreach($feeling_children3->children as $feeling_children4)
<li id="{{{$feeling_children4->id}}}"> {{{$feeling_children4->name}}}</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>