can not show angular apps data in django template - angularjs

Please help me to solve this problem.This angular code works locally but can not work in django template.
I call this static files end of the body of base.html
<script src="{% static "js/angular.min.js" %}"></script>
<script src="{% static "js/restangular.min.js" %}"></script>
<script src="{% static "js/angular-ui-router.min.js" %}"></script>
This is contactlist.html
<div id="contactlist" ng-app="newApp">
<div class="container" ng-controller="angCtrl">
<h1 class="text-center">Search contact for {{myModel}}</h1>
<form>
<div class="input-group">
<input type="text" class="form-control" ng-model="myModel"
placeholder="Search Contact">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
<div class="all">
<table class="table table-hover text-center">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Name</th>
<th class="text-center">Contact Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist | filter:myModel |
orderBy: 'name'">
<td>{{contact.id}}</td>
<td>{{contact.name}}</td>
<td>{{contact.contact}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This is app.js
var app = angular.module('newApp', []);
app.controller('angCtrl', function($scope) {
$scope.name = "";
});
app.controller('angCtrl', function($scope) {
$scope.contactlist = [
{id:'1',name:'raisul',contact:'+8801723844330'},
{id:'2',name:'Rafikul',contact:'+8801723564330'},
{id:'3',name:'Shariful',contact:'+8801726864330'},
{id:'4',name:'kamarul',contact:'+8801723764330'},
{id:'5',name:'Ashraful',contact:'+8801728864330'},
{id:'6',name:'Jamarul',contact:'+8801723964330'},
{id:'7',name:'Rahul',contact:'+8801723861330'},
{id:'8',name:'Rashidul',contact:'+8801725864330'},
]
});
It shows the table element but can not show any data

Related

iTunes API doesn't return anything when connecting with AngularJS. Works in a separate project, doesn't integrate into another one

I'm using angularJS v1.8.2, and Bootstrap5.2 in this project, the CDN's are not included to represent the files in their current state. Angular, and Bootstrap are both connected to my main document, Im only changing views with angular's routing.
This is the javascript connecting to the API and returning results, or errors. Works on its own, doesn't work then inserted into a different project. The page does not have any other functionality that should interfere.
var iTunesController = function ($scope, $http) {
$scope.searchItunes = function (artist) {
$http
.jsonp("https://itunes.apple.com/search", {
params: {
callback: "JSON_CALLBACK",
term: artist
},
})
.then(onSearchComplete, onError);
};
var onSearchComplete = function (response) {
$scope.data = response.data;
$scope.songs = response.data.results;
console.log(data)
};
var onError = function (reason) {
$scope.error = reason;
};
};
<html ng-app>
<head>
<title>Document</title>
</head>
<body ng-controller="iTunesController">
<div class="container text-center pt-5">
<h1 class="text-white display-3">Search for music, Movies or Tv Shows</h1>
</div>
<div class="container">
{{error}}
</div>
<div class="container">
<form name="search" ng-submit="searchiTunes(artist)">
<div class="container w-50 pt-5 px-5 d-none d-lg-block">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" aria-label="Search" aria-describedby="basic-addon1"
ng-model="artist">
<button class="btn btn-warning" type="submit" id="button-addon2">Button</button>
</div>
</div>
</div>
</form>
</div>
<div class="container">
<table class="table table-striped" ng-show="songs">
<thead>
<tr>
<th>Album Artwork</th>
<th>Track</th>
<th>Preview</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="song in songs">
<td><img ng-src="{{song.artworkUrl60}}" alt="{{song.songCollectionName}}"></td>
<td>{{song.trackName}}</td>
<td>Play</td>
<td>{{song.collectionPrice}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

AngularJS - ng-repeat of rows inside tables

AngularJS - ng-repeat & $http.get
Edit: Tried using unique, also did not work:
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<th ng-repeat="(key, value) in elements | unique:'key'">
{{key}}
</th>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
I'm filling tables with external information using ng-repeat, but I am struggling with filling the headers. I found an example to extract the keys:
<td ng-repeat="(key, element) in elements">
However, this does not help me as I should fill the th just one time, over the data, not beside it. I also tried adding an additional ng-repeat, to no avail.
Regaring $http.get and ODATA-sources - is there any way to populate the table with all available data at once? Or anywhere I can read which tokens are accepted (did not find any information when googling)? Right now I'm only geting a max of 11 elements - and I'm not allowed to add the token to the URL the way I am doing at the moment. Is there a better way to fetch the data? Any pointers would be appreciated, please let me know if additional information is needed. This is the code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ODataResources/1.0.25/odataresources.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<script>
const BASE_URL = 'http://services.odata.org/V3/OData/OData.svc/';
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var app = angular.module('getData', []);
app.controller('fetchLinks', function($scope, $http) {
$http.get(BASE_URL)
.then(function(response) {
$scope.rawLinks = response.data;
});
});
app.controller('fetchData', function($scope, $http) {
let dynamicContent = getParameterByName('q');
console.log(BASE_URL+dynamicContent);
$http.get(BASE_URL+dynamicContent)
.then(function(response) {
$scope.rawData = response.data;
});
});
</script>
<body ng-app="getData">
<div class="container main-container">
<div class="row">
<div class="col menu">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul>
<div ng-controller="fetchLinks">
<li class="nav-item" ng-repeat="element in rawLinks.value">
<a class="nav-link" href="?q={{ element.url }}">{{ element.name }}</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
To repeat multiple rows, use the Special Repeat Start and End Points:
<table class="table" ng-controller="fetchData">
<tr ng-repeat-start="elements in rawData.value">
<th ng-repeat="(key, value) in elements>
{{key}}
</th>
</tr>
<tr ng-repeat-end>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
This will repeat two rows; the first with keys and the second with values.
Your code does almost what I wanted to achieve, so I added an ng-if="$first" to the ng-repeat-start line
If your goal is to create only one header row, it is more efficient to do it as:
<table class="table" ng-controller="fetchData">
<tr>
<th ng-repeat="(key, value) in rawData.value[0]">
{{key}}
</th>
</tr>
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
This avoids all the overhead with evaluating multiple ng-if expressions. It also assumes that every object in the rawData.value array has the same keys.

How Do i Filter JSON Array Using Checkboxes with AngularJS?

I have the following code where i'm trying to filter on the product array by checking a checkbox,but in my case list is not filtered click on the checkbox,i have set the value of city in the value of the checkbox,but list is not filtered?
//here we create the product array and display the array in the HTML page.
var app=angular.module("myApp",[]);
app.controller("myCont",function($scope){
var product = [
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"},
{pid:"103",ename:"Selena",esalary:"35000",ecity:"England"},
{pid:"102",ename:"Lokesh",esalary:"32500",ecity:"Malwa"},
{pid:"108",ename:"Gotm",esalary:"8910",ecity:"Ujain"},
{pid:"106",ename:"Soni",esalary:"16000",ecity:"bhopal"},
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"}
]
$scope.products=product;
});
<html>
<head>
<script src="angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="controller.js"></script>
</head>
<style>
#count
{
color: blue;
}
#search
{
background-color: LightBlue;
}
</style>
<div class="funkyradio">
<div class="funkyradio-default">
<input type="checkbox" Agar/>
<label for="checkbox1">First Option default</label>
</div>
<div class="funkyradio-primary">
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value="'US'" data-ng-false-value=''/>US
<label for="checkbox2">Second Option primary</label>
</div>
</div>
</div>
<body ng-app="myApp" ng-controller="myCont">
<form align="center">
//Search tab for all array
Search Here<input type="text" name="uname"
ng-model="search" placeholder=" Enter data">
Hide Salary <input type="checkbox" ng-model="hideSalary">
<table class="table table-hover" align="center" border="2">
<thead id="search">
<tr>
<th>pid</th>
<th>ename</th>
<th ng-hide="hideSalary">esalary</th>
<th>
ecity
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered = (products | filter:search) | filter:search.type1 | orderBy:'ename'">
<td>{{x.pid}}</td>
<td>{{x.ename | uppercase}}</td>
<td ng-hide="hideSalary">{{x.esalary }}</td>
<td>{{x.ecity}}</td>
</tr>
</tbody>
</table>
<span id="count">
<hr>
Filtered list has {{filtered.length}} items
</span>
</form>
</body>
</html>

AngularJS $routeProvider not displaying html page in <div ng-view>

I am new to AngularJS and need some help to solve an issue routing to another html page while passing a parameter. My application has a form with input fields (name & course). That information the user inputs will display in a table that is hidden unless it has data to display.
The issue is when clicking on the Display Info link, I am not being routed to the DisplayInfo.html page.
Here is the code: http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview
app.js file
var app = angular.module('student', []);
app.controller('StudentController', function($scope) {
$scope.studentList = [];
$scope.addStudent = function() {
this.studentList.push({
name: $scope.getName,
course: $scope.getCourse,
date: new Date()
});
$scope.getName = "";
$scope.getCourse = "";
};
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/DisplayInfo/:name', {
templateUrl: 'DisplayInfo.html',
controller: 'DisplayInfoController'
});
}
]);
app.controller('DisplayInfoController', function($scope, $routeParams) {
$scope.name = $routeParams.getName;
});
});
Index.html
<!DOCTYPE html>
<html ng-app="student">
<head>
<link rel="stylesheet" type="text/css" href="student.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<h1>Student Access</h1>
<p>
<fieldset>
<br />
<br />
<form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()">
<div ng-if="studentList.length > 0">
<table class="table table-striped">
<tr>
<th>
Name
</th>
<th>
Course
</th>
<th>
Date
</th>
</tr>
<tr ng-repeat="getStudent in studentList track by $index">
<td ng-bind="getStudent.name">
</td>
<td ng-bind="getStudent.course">
</td>
<td ng-bind="getStudent.date | date:'MM-dd-yyyy'">
</td>
<td>Display Info</td>
</tr>
</table>
</div>
<div ng-view></div>
<br />
<fieldset class="form-group">
<legend><strong>First Name</strong></legend>
<input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" />
</fieldset>
<fieldset class="form-group">
<legend><strong>Course</strong></legend>
<input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" />
</fieldset>
<input type="submit" class="btn btn-primary pull-right" value="Add Info" />
</form>
</fieldset>
</div>
</div>
<!-- AngularJS Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="app.js"></script>
</body>
DisplayInfo.html
Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.
I think a / is missing in :
<td>Display Info</td>
It should be :
<td>Display Info</td>

how to pass thymeleaf object to angularjs

I am using Spring-boot, thymeleaf and Angularjs. In my my view.html I need to recover the list "lstUsers" from my class "controller.java" using Angular.
For informations: "view.html" and "controller.java" works good. The problem is how I can fill my variable "$scope.users" with "lstUsers"
this is app.js
var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);
app.controller('listdata',function($scope, $http){
$scope.users = [];
$scope.users = $lstUsers; // (lstUsers) is an object from controller.java: this not work !!!!!!!
$scope.sort = function(keyname){
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
});
this is my view.html
<body>
<div role="main" class="container theme-showcase">
<div class="" style="margin-top:90px;">
<div class="col-lg-8">
<div class="bs-component" ng-controller="listdata">
<form class="form-inline">
<div class="form-group">
<input type="text" ng-model="search" class="form-control input-style search-input" placeholder="Search" />
</div>
</form>
<table class="table table-responsive table-hover table-striped table-bordered tablesorter">
<thead>
<tr>
<th ng-click="sort('id')">Id
<span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('first_name')">First Name
<span class="glyphicon sort-icon" ng-show="sortKey=='first_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('last_name')">Last Name
<span class="glyphicon sort-icon" ng-show="sortKey=='last_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('hobby')">Hobby
<span class="glyphicon sort-icon" ng-show="sortKey=='hobby'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.hobby}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
</div>
</div>
<script th:src="#{/js/angular/angular.js}"></script>
<script th:src="#{/js/dirPagination.js}"></script>
<script th:src="#{/js/app.js}"></script>
</body>
this is a snippet of my controller.java
...
#RequestMapping(value = "/getSubTasks")
public ModelAndView getSubTasks(#RequestParam String issueKey) {
ModelAndView model = new ModelAndView();
.....
model.setViewName("view");
model.addObject("lstUsers", getUsers());
}
return model;
}
...
Thanks for your answer
Usually this kind of data is retrieved from the server via ajax. For example you can provide a Spring MVC Controller that returns your sub tasks as a JSON array and your angular app would need to retrieve that data from your Spring MVC Controller via ajax.
Have a look at this tutorial: https://spring.io/guides/gs/consuming-rest-angularjs/

Resources