I have some json with correct format that passed from laravel controller and i want to show them recursively with angular but the HTML inside ng-template not rendered. what's wrong?
note: I replaced the angular default tag {{ }} with <% %>
<div id="treeViewContent" ng-init="getTreeData()">
<script type="text/ng-template" id="directoryTree">
<div class="tree-item" ng-click="loadDir(dir.address)">
<i class="fa fa-folder orange"></i>
<% dir.name %>
</div>
<ul ng-if="dir.subdir">
<li ng-repeat="dir in dir.subdir" ng-include="'directoryTree'"></li>
</ul>
</script>
<ul class="noselect">
<li>
<div class="tree-item" ng-click="loadDir('/')">
<i class="fa fa-hdd-o blue"></i>
{{ ucfirst(\Auth::user()->username) }}
</div>
<ul>
<li ng-repeat="dir in dirs" ng-include="'directoryTree'"></li>
</ul>
</li>
</ul>
</div>
and getTreeData() is:
$scope.dirs = [];
$scope.getTreeData = function()
{
$http.post("/admin/drive/treeData", {_token: csrf_code}).then(function(response)
{
if (response.status == 200)
{
$scope.dirs = response.data;
}
else
{
Flash({status: "failed", message: "Error"});
}
})
}
and json data
[
{
"name":"image",
"address":"\/image",
"subdir":[
{
"name":"document",
"address":"\/image\/document",
"subdir":[
]
}
]
},
{
"name":"document",
"address":"\/document",
"subdir":[
]
},
{
"name":"movies",
"address":"\/movies",
"subdir":[
]
}
]
Please find the plunkr link plnkr.co/edit/B33ZhzU03CyS45a0lX4w?p=preview, the above code is working fine. Please check the json structure or post the json here.
Related
ng-repeat is not listing different json values, instead it just displays the entire json file content in single list item
codepen
html:
<div ng-app="myApp">
<div ng-controller="myCtrl" class="container">
<h2>Basic List</h2>
<ul class="list-group">
<li class="list-group-item" ng-reapeat="student">
{{student}}
</li>
</ul>
</div>
</div>
All the json file content is in here. I just need the specific data to display on each list item.
For Example,
Student One
Student Two
Student Three
Student Four
Student Five
See image for issue
JS
<script>
var app = angular.module('myApp', []);
//$.ajax({url: app, crossDomain:true, dataType: 'json', type: 'GET'})
app.controller('myCtrl', function($scope, $http){
$http.get("student.json")
// $http.get("stud.json")
.then(function(response) {
$scope.student = response.data;
});
});
</script>
json
[
{
"name" : "Student One"
},
{
"name" : "Student Two"
},
{
"name" : "Student Three"
},
{
"name" : "Student Four"
},
{
"name" : "Student Five"
}
]
Your ng-repeat should be look like, to be more on that, you are missing the proper syntax and its ng-repeat not ng-reapeat
<li class="list-group-item" ng-repeat="stu in student" >
{{stu.name}}
</li>
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.student =
[
{
"name": "Student One"
},
{
"name": "Student Two"
},
{
"name": "Student Three"
},
{
"name": "Student Four"
},
{
"name": "Student Five"
}
];
});
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" >
<div class="container">
<h2>Basic List</h2>
<ul class="list-group">
<li ng-repeat="stu in student" >
{{stu.name}}
</li>
</ul>
</div>
</div>
</body>
I figured it out!
I fixed the syntax of the parameter in ng-repeat attribute.
So instead of the previous :
<ul class="list-group">
<li class="list-group-item" ng-reapeat="student">
{{student}}
</li>
Before
it should be like this :
<ul class="list-group" >
<li class="list-group-item" ng-repeat="student in student" >
{{student.name}}
</li>
Result:
After
I have some jsons data such as below, when I tried to print them recursively with ng-include and ng-template (as shown below), the ng-include's inside html codes doesnot rendered and it is blank.
and other problem is that in printing ng-include , it just print 1 level of recursion and it doesn't keeping on printing.
so what's wrong?
Json data:
[{"name":"default","path":">var>www>rapa-v2>themes>","subdir":[{"name":"css","path":">var>www>rapa-v2>themes>>default","subdir":[{"name":"images","path":">var>www>rapa-v2>themes>>default>css","subdir":[]},{"name":"style.css","path":">var>www>rapa-v2>themes>>default>css"}]},{"name":"index.blade.php","path":">var>www>rapa-v2>themes>>default"},{"name":"information.json","path":">var>www>rapa-v2>themes>>default"},{"name":"screen.jpg","path":">var>www>rapa-v2>themes>>default"}]}]
Html code:
<div class="theme-files-list ltr" ng-init="loadDir('{{ $theme }}')">
<script type="text/ng-template" id="directoryTree">
<div class="tree-item">
<i class="fa fa-file-text-o maroon"></i>
<a href="<% '/admin/setting/template/edit/{{ $theme }}/'+item.name %>">
<% item.name %>
</a>
</div>
<ul ng-if="item.subdir">
<li ng-repeat="item in item.subdir" ng-include="'directoryTree'"></li>
</ul>
</script>
<ul class="noselect">
<li>
<div class="tree-item bg-aqua">
<i class="fa fa-paint-brush blue"></i>
{{ ucfirst($theme) }}
</div>
<ul>
<li ng-repeat="item in themeDir" ng-include="'directoryTree'"></li>
</ul>
</li>
</ul>
</div>
important: I use laravel and for blade system print, I have replaced angular print symbols {{ }} with <% %>
I think you have to use different code. Your json represent a tree of folder but in the angular app, you're only iterating on the first level and in the first level you have only 1 item with subdir.
If you format correctly your json response you can easily understand this.
[
{
"name":"default",
"path":">var>www>rapa-v2>themes>",
"subdir":
[
{
******** You're targeting this element below **********
"name":"css",
"path":">var>www>rapa-v2>themes>>default",
"subdir":
[
{
"name":"images",
"path":">var>www>rapa-v2>themes>>default>css",
"subdir":[]
},
{
"name":"style.css",
"path":">var>www>rapa-v2>themes>>default>css"
}
]
},
{
******** This doesn't has subdir **********
"name":"index.blade.php",
"path":">var>www>rapa-v2>themes>>default"
},
{
******** This doesn't has subdir **********
"name":"information.json",
"path":">var>www>rapa-v2>themes>>default"
},
{
******** This doesn't has subdir **********
"name":"screen.jpg",
"path":">var>www>rapa-v2>themes>>default"
}
]
}
]
So you have to change the json or to change ng-repeat
How to show comments in items?
This is where items save
$scope.items = [
{ 'item': 'one',
'comments':[{'comment':'comment'}]
},
{ 'item': 'two',},
{'item': 'three'}
];
<ul>
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div>
</li>
</ul>
http://plnkr.co/edit/19w1Q3XhoWQcpxm5SuxX?p=preview
You Just missed to add your comment Div in between the list tag. please update the code like above code. I have checked on Plunker.
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng-click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div></li>
EDIT: Solved
views.py
def post_list(request):
queryset = Post.objects.all()
json_data = serializers.serialize('json', queryset)
context = {
"jsondata" : json_data,
}
return render(request,"index.html", context)
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myapp" ng-controller="myctrl">
{{ jsondata }}
<div class="ui icon input">
<input type="text" ng-model="search" placeholder="Search skills...">
<i class="search link icon"></i>
</div>
<div class="ui link cards" style="padding:40px">
<div class="card">
<div class="image">
<img class="ui avatar centered image" src="http://1.semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<div class="ui small header" ng-repeat="skill in skills | filter:search">
{{ skill.fields.post_title}}
</div>
<div class="description">
{{ skill.fields.post_content }}
</div>
</div>
</div>
</div>
<script type="text/javascript">
var skills_list = "{{ jsondata }}";
var nice_data = JSON.parse(skills_list.replace(/"/g, '"'))
var very_nice_data = JSON.stringify(nice_data);
console.log(very_nice_data)
</script>
<script>
angular.module('skillboard', []).controller('searchskills', function ($scope) {
$scope.skills = very_nice_data;
});
</script>
</body>
Output of **very_nice_data** in console is:
[
{
"model": "posts.post",
"pk": 1,
"fields": {
"post_title": "Algorithms",
"post_content": "Calling it.",
"updated_on": "2016-06-12T09:09:45.198Z",
"timestamp": "2016-04-20T09:44:21.887Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "http://example.com"
}
},
{
"model": "posts.post",
"pk": 4,
"fields": {
"post_title": "Data Structures",
"post_content": "new content here",
"updated_on": "2016-06-12T09:09:26.359Z",
"timestamp": "2016-04-26T06:28:32.569Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "http://example.com"
}
},
{
"model": "posts.post",
"pk": 11,
"fields": {
"post_title": "Dynamic Programming",
"post_content": "This level of DP is well suited for 2+ yr experience programmers/researchers.",
"updated_on": "2016-06-12T09:09:16.542Z",
"timestamp": "2016-06-12T08:44:25.705Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "#"
}
}
]
I am trying to render JSON response from my django view into my template using angular. I am using semantic cards for each item. JSON response is perfectly fine. ng-repeat is also looping for number of items in the JSON but post_title and post_content is not displaying.
<div class="ui small header" ng-repeat="skill in skills | filter:search">
{{ skill.fields.post_title }}
</div>
<div class="description">
{{ skill.fields.post_content }}
</div>
Where is the bug? Please help.
Don't stringify very-nice_data.
It needs to be a javscript array not a json string when you do $scope.skills = very_nice_data;
What Charlieftl answered is perfect. Instead of var very_nice_data = JSON.stringify(nice_data); just do var very_nice_data = nice_data;
var app = angular.module("skillboard", []);
app.controller("searchskills", function($scope) {
$scope.skills = very_nice_data;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="skillboard" ng-controller="searchskills">
<div class="ui small header" ng-repeat="skill in skills | filter:search">
{{ skill.fields.post_title }}
</div>
</div>
<script type="text/javascript">
var skills_list = '[{"model":"posts.post","pk":1,"fields":{"post_title":"Algorithms","post_content":"Calling it.","updated_on":"2016-06-12T09:09:45.198Z","timestamp":"2016-04-20T09:44:21.887Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com"}},{"model":"posts.post","pk":4,"fields":{"post_title":"Data Structures","post_content":"new content here","updated_on":"2016-06-12T09:09:26.359Z","timestamp":"2016-04-26T06:28:32.569Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com"}},{"model":"posts.post","pk":11,"fields":{"post_title":"Dynamic Programming","post_content":"This level of DP is well suited for 2+ yr experience programmers/researchers.","updated_on":"2016-06-12T09:09:16.542Z","timestamp":"2016-06-12T08:44:25.705Z","test_type":"Coding","number_of_questions":0,"test_url":"#"}}]'
var nice_data = JSON.parse(skills_list.replace(/"/g, '"'))
var very_nice_data = nice_data;
</script>
Finally resolve the issue. I encountered to issue below:
There was conflict in the curly braces of django and angular view bindings. So i created custom bindings below.
var app=angular.module('appName', []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
I have tried to filter blank string item from ng-repeat. But didn't succeeded. Can someone please help me at this.
JSFiddel Link
HTML Code:
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details | filter: filter2 ">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
JS Code:
function myCtrl($scope) {
$scope.details = [{
name: 'Bill',
shortDescription: null
}, {
name: 'Sally',
shortDescription: 'A girl'
},{
name: 'Tally',
shortDescription: ''
}];
}
function filter2(detail){
if (item.shortDescription.length == 0){
return true;
}
else{
return false;
}
}
Expected Result:
/*
Expected Result
Bill
Sally
*/
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details" ng-if="detail.shortDescription">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
fiddle