<body ng-app>
<ul ng-controller='appcontrol'>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
</body>
http://jsfiddle.net/yd4VS/2/
try to retrieve item object's name using ng-controller, no luck
Your JS syntax is incorrect. Try this:
function appcontrol($scope){
$scope.items = [{
'name': 'shoe',
'color' : 'blue',
'price': '200',
}];
}
note that I've wrapped items in an array [], and you were missing a = sign. Also, very important, on jsFiddle, angular will only work with No Wrap - in <head> set under Frameworks & Extensions.
See the updated fiddle: http://jsfiddle.net/hzU7y/
EDIT: Here is an example of the array with more items:
$scope.items = [
{
'name': 'shoe',
'color' : 'blue',
'price': '200',
},
{
'name': 'shirt',
'color' : 'pink',
'price': '150',
},
{
'name': 'shorts',
'color' : 'denim',
'price': '120',
}
];
This is probably the most natural way to use ng-repeat as it is repeating over a collection. Or, you could do something similar to what is mentioned in your comment by using a key value pair:
HTML:
<body ng-app>
<ul ng-controller='appcontrol'>
<li ng-repeat="(id, item) in items"> //<- note difference in the ng-repeat tag
{{ item.color }} {{ item.name }} at $ {{ item.price }}
</li>
</ul>
</body>
JS:
function appcontrol($scope){
$scope.items = {
'item1' : {
'name': 'shoe',
'color' : 'blue',
'price': '200',
},
'item2' :{
'name': 'shirt',
'color' : 'pink',
'price': '150',
},
'item3' :{
'name': 'shorts',
'color' : 'denim',
'price': '120',
}};
}
I've done the same as SimonC but with another cleanup and added ng-app name as recommended
html:
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<ul ng-controller='appcontrol'>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
</div>
</body>
and js :
var app = angular.module('MyApp',[]);
app.controller("AppController", function($scope){
$scope.items{
'name': 'shoe',
'color' : 'blue',
'price': '200';
}
});
http://jsfiddle.net/yd4VS/4/
Related
When a grouped header (aka nested) has 1 nested level (like "Price" and "Total" in the example) there is a strange behaviour: I would expect a way to hide the whole column, yet when I hide "Total", "Price" remains visible. Is there a way to hide that?
You can see it works fine in case the 2nd level header has more than 1 element: I hide "Id" and "Name" and "Key" is automatically hidden.
https://live.bootstrap-table.com/code/antonioaltamura/6940
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<table id="table" border=1>
</table>
<button onclick="togglePrice()">
togglePrice
</button>
<button onclick="toggleKey()">
toggleKey
</button>
<script>
var $table = $('#table')
var priceVisible = true;
var keyVisible = true;
$(function() {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
{
'id': 1,
'name': 'Item 1',
'price': '$1'
},
{
'id': 2,
'name': 'Item 2',
'price': '$2'
},
{
'id': 3,
'name': 'Item 3',
'price': '$3'
},
{
'id': 4,
'name': 'Item 4',
'price': '$4'
},
{
'id': 5,
'name': 'Item 5',
'price': '$5'
}
]
$table.bootstrapTable({
data: data,
columns: [
[
{
title: "Key",
colspan:2
},
{
title: "Price",
field: "h_price"
},
],
[
{title: "Id", field:"id"},
{title: "Name", field:"name"},
{title: "Total", field:"price"}
]
]})
})
function togglePrice() {
$table.bootstrapTable(priceVisible ? "hideColumn" : "showColumn", "price")
priceVisible = !priceVisible
}
function toggleKey() {
$table.bootstrapTable(keyVisible ? "hideColumn" : "showColumn", "id")
$table.bootstrapTable(keyVisible ? "hideColumn" : "showColumn", "name")
keyVisible = !keyVisible
}
</script>
what could be the problem why onclick does not fire the gtag. I tried all variantions of quotes.
<a href="https://www.site.de/analytics.php?page=1&del=TR-123" onclick="gtag('event', 'refund', {
'transaction_id': 'TR-123',
'value': 90.17,
'currency': 'USD',
'items': [{
'id': '402',
'name': 'Diamant 050-029-034 comfort',
'quantity': 1,
'price': '90.17'
}]
});">
Where do I have to use "" and where '
I think the issue is that this onclick is on a hyperlink.
<a href="https://www.site.de/analytics.php?page=1&del=TR-123" onclick="javascript:(function() {
gtag('event', 'refund', {
'transaction_id': 'TR-123',
'value': 90.17,
'currency': 'USD',
'items': [{
'id': '402',
'name': 'Diamant 050-029-034 comfort',
'quantity': 1,
'price': '90.17'
}]
});
return false;
); })()">
I have create a tree diagram using orgChart.
code:
var datascource = {
'id': 1,
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'id':2,'name': 'Bo Miao', 'title': 'department manager' },
{ 'id':3,'name': 'Su Miao', 'title': 'department manager'},
{ 'id':4,'name': 'Hong Miao', 'title': 'department manager' },
{ 'id':5,'name': 'Chun Miao', 'title': 'department manager' }
]
};
$('#chart-container').orgchart({
'visibleLevel': 2,
'pan': true,
'data' : datascource,
'nodeContent': 'title',
'nodeId':'id',
'createNode': function($node, data) {
$node.on('click', function(event) {
$('#chart-container').orgchart('addChildren', $node,
{'id' : 7, 'name': 'Hong ', 'title': 'Test manager' }
);
});
}
});
Digram generation working fine.
I need to add child nodes on click by nodes using ajax.
Screen shot:
You can refer to this demo on codepen.io.
Generally, you can call the methods of orgchart plugin with the following form : )
var oc = $('#chart-container').orgchart{(...});
oc.method();
http://jsfiddle.net/2kwkh2uL/5498/
This is a sample code I am trying, to build a jsTree on a javascript function call but for some reason it's not doing it.
If I load it normally it build tree without any issue.
Can anyone please let me know what's wrong.
function build_tree(tree_data) {
$('#container').jstree({
'core': {
'data': tree_data
}
});
}
$("#gen_tree").click(function() {
var tree_data = "[{ 'id' : 'cases_root', 'parent' : '#', 'text' : 'Cases [0,1,2]', 'case_id' : '0' },{ 'id' : 'my_cases', 'parent' : 'cases_root', 'text' : 'My Cases', 'case_id' : '0' },{ 'id' : 'active', 'parent' : 'my_cases', 'text' : 'active [0,1,2]', 'case_id' : '0' },{ 'id' : '2', 'parent' : 'active', 'text' : 'AXA Investment Managers [0,1,0]', 'case_id' : '0' },{ 'id' : '107157', 'parent' : '2', 'text' : 'Miani, Antonio [13]', 'case_id' : '107157' },{ 'id' : '98', 'parent' : 'active', 'text' : 'Graff Diamonds [0,0,1]', 'case_id' : '0' },{ 'id' : '106560', 'parent' : '98', 'text' : 'HEE JIN, Gong [18]', 'case_id' : '106560' },{ 'id' : '84', 'parent' : 'active', 'text' : 'Optiver Services BV [0,0,1]', 'case_id' : '0' },{ 'id' : '106608', 'parent' : '84', 'text' : 'SAVILUOTO, Antti [24]', 'case_id' : '106608' },]";
build_tree(tree_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<div id="container"></div>
<input id='gen_tree' type='button' value='Generate Tree' />
Your issue is because you're giving the data as a string, however it's not valid JSON, and hence cannot be deserialised by the jsTree library.
To fix the problem either correct the JSON format, or even easier, provide the data as an object. Try this:
function build_tree(tree_data) {
$('#container').jstree({
'core': {
'data': tree_data
}
});
}
$("#gen_tree").click(function() {
var tree_data = [{
'id': 'cases_root',
'parent': '#',
'text': 'Cases [0,1,2]',
'case_id': '0'
}, {
'id': 'my_cases',
'parent': 'cases_root',
'text': 'My Cases',
'case_id': '0'
}, {
'id': 'active',
'parent': 'my_cases',
'text': 'active [0,1,2]',
'case_id': '0'
}, {
'id': '2',
'parent': 'active',
'text': 'AXA Investment Managers [0,1,0]',
'case_id': '0'
}, {
'id': '107157',
'parent': '2',
'text': 'Miani, Antonio [13]',
'case_id': '107157'
}, {
'id': '98',
'parent': 'active',
'text': 'Graff Diamonds [0,0,1]',
'case_id': '0'
}, {
'id': '106560',
'parent': '98',
'text': 'HEE JIN, Gong [18]',
'case_id': '106560'
}, {
'id': '84',
'parent': 'active',
'text': 'Optiver Services BV [0,0,1]',
'case_id': '0'
}, {
'id': '106608',
'parent': '84',
'text': 'SAVILUOTO, Antti [24]',
'case_id': '106608'
}];
build_tree(tree_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<div id="container"></div>
<input id='gen_tree' type='button' value='Generate Tree' />
I'm trying to print as an li any item that matches the index of the first loop.
For example: first loop makes li's classed as cat1_li, 2nd one as cat2_li, 3rd one as cat3_li
However the closest I can get prints them all out in separate lists.
Having real trouble getting my head around using ng-repeats inside other ng-repeats and can't seem to find where the issue is. I can see why it is printing multiple lists, but not how to remedy this behaviour.
Would anyone be willing to take a look?
HTML:
<div>
<ul class="tasks" ng-repeat="cat in taskCategories.categories">
{{ cat }}
<li ng-repeat="tasks in tasklist.tasks | orderBy:'category' | filter: {category: cat}" class="cat{{ index + 1 }}_li">
<span>
<span class="panel_title">
{{ tasks.title }}
</span>
</span>
</li>
</ul>
</div
Object:
app.controller('MainController', ['$scope', function($scope) {
$scope.taskCategories = {
categories: [
'work',
'chores',
'learning',
'lifting'
]
};
$scope.tasklist = {
tasks: [{
title: 'Email Gregory',
category: 'work'
}, {
title: 'Clean the Kitchen',
category: 'chores'
}, {
title: 'AngularJS',
category: 'learning'
}, {
title: 'Hose Car',
category: 'chores'
}, {
title: 'Email Jethro',
category: 'work'
}, {
title: '400 lbs',
category: 'lifting'
}
]
};
}]);
You can use $parent.$index if you're trying to use the Category's index inside the nested ng-repeat:
var app = angular.module('app', []);
app.controller('MainController', ['$scope',
function($scope) {
$scope.taskCategories = {
categories: [
'work',
'chores',
'learning',
'lifting'
]
};
$scope.tasklist = {
tasks: [{
title: 'Email Gregory',
category: 'work'
}, {
title: 'Clean the Kitchen',
category: 'chores'
}, {
title: 'AngularJS',
category: 'learning'
}, {
title: 'Hose Car',
category: 'chores'
}, {
title: 'Email Jethro',
category: 'work'
}, {
title: '400 lbs',
category: 'lifting'
}]
};
}
]);
.cat1_li {
background-color: yellow;
}
.cat2_li {
background-color: cyan;
}
.cat3_li {
background-color: pink;
}
.cat4_li {
background-color: lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
<ul class="tasks" ng-repeat="cat in taskCategories.categories">
{{ cat }}
<li ng-repeat="tasks in tasklist.tasks | orderBy:'category' | filter: {category: cat}" class="cat{{ $parent.$index + 1 }}_li">
<span>
<span class="panel_title">
{{ tasks.title }}
</span>
</span>
</li>
</ul>
</div>
UPDATE
After reading your comment in the question, you don't need two ng-repeat at all:
var app = angular.module('app', []);
app.controller('MainController', ['$scope',
function($scope) {
$scope.taskCategories = {
categories: [
'work',
'chores',
'learning',
'lifting'
]
};
$scope.tasklist = {
tasks: [{
title: 'Email Gregory',
category: 'work'
}, {
title: 'Clean the Kitchen',
category: 'chores'
}, {
title: 'AngularJS',
category: 'learning'
}, {
title: 'Hose Car',
category: 'chores'
}, {
title: 'Email Jethro',
category: 'work'
}, {
title: '400 lbs',
category: 'lifting'
}]
};
$scope.mappedTasks = $scope.tasklist.tasks.map(function(task) {
task.category = $scope.taskCategories.categories.indexOf(task.category);
return task;
}).sort(function(a, b) {
return a.category > b.category;
});;
console.log($scope.mappedTasks);
}
]);
.cat1_li {
background-color: yellow;
}
.cat2_li {
background-color: cyan;
}
.cat3_li {
background-color: pink;
}
.cat4_li {
background-color: lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
<ul class="tasks">
<li ng-repeat="task in mappedTasks" class="cat{{ task.category + 1 }}_li">
<span>
<span class="panel_title">
{{ task.title }}
</span>
</span>
</li>
</ul>
</div>
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope.
So what you need to do is reach up to the parent scope, and use that $index.
HTML :
<li ng-repeat="tasks in tasklist.tasks | orderBy:'category' | filter: {category: cat}" class="cat{{ $parent.$index + 1 }}_li">