It doesn't work why?
this is html
ng-repeat doesn't work . I can't understand what's wrong with it . I checked everything but it still the same thing and it looks like this post is mostly code so i need to add more words to here to share this with you guys.I think this information is sufficient
<!doctype html>
<html ng-app="telebe">
<head>
<meta charset="utf-8">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet" />
<title>AngularJS Practice</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div>
<div ng-controller="BodyController as bc">
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr ng-repeat="telebe in telebeler" >
<td>
{{telebe.ad}}
</td>
<td>
{{telebe.soyad}}
</td>
<td>
{{telebe.age}}
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
this is app.js
app = angular.module("telebe",[ ]);
app.controller("BodyController",function(){
this.telebeler = [{ad:'Murad',soyad:"Ramazanli",qrup:'b',id:5,age:22},{ad:'Sultan',soyad:"Esgerov",qrup:'a',id:2,age:14},{ad:'Nazim',soyad:"Memmedov",qrup:'c',id:1,age:23},{ad:'Leyla',soyad:"Semedova",qrup:'b',id:3,age:24}];
});
try changing telebeler to bc.telebeler:
<tr ng-repeat="telebe in bc.telebeler track by $index" >
<td>
{{telebe.ad}}
</td>
<td>
{{telebe.soyad}}
</td>
<td>
{{telebe.age}}
</td>
</tr>
See this plunker, its working.
simply add a track by $index in your ng-repeat refer to the update above.
See this error reference to understand it more
you forgot passing $scope parameter. Replace this with $scope while assigning telebeler value
app.controller("BodyController",function($scope){
$scope.telebeler = [{ad:'Murad',soyad:"Ramazanli",qrup:'b',id:5,age:22},{ad:'Sultan',soyad:"Esgerov",qrup:'a',id:2,age:14},{ad:'Nazim',soyad:"Memmedov",qrup:'c',id:1,age:23},{ad:'Leyla',soyad:"Semedova",qrup:'b',id:3,age:24}];
});
Related
I am trying to display the JSON object in JSP page using angular js.
The Data is coming correctly but display code is not working properly in JSP page.
in app.js
$http.get(urlBase+'/users1').success(function (data){
for(var i=0;i<data.length;i++){
alert(data[i]);
}
$scope.users=data;
})
.error(function(data) {
alert("errore"+data);
$scope.data = "error in fetching data";
});
jsp file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="taskManagerApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AngularJS Task Manager</title>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="<c:url value="/resources/js/app.js"/>"></script>
</head>
<body>
<div ng-controller="taskManagerController">
<span>Add Task</span>
<div>
<div>
<table>
<tr>
<td> Name:</td>
<td><input type="text" ng-model="Name"/></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" ng-model="City"/></td>
</tr>
<tr>
<td>
<button ng-click="addTask()" class="btn-panel-big">Add New Task</button></td>
</tr>
</table>
</div>
</div>
<div>
<table>
<div ng-repeat="user in users">
<tr>
<td>hai {{user.id}}</td>
<td>hello {{user.Name}}</td>
<td>wellcome {{user.city}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
</html>
ng-repeat is also not working here. Is there any mistake while assigning the value to scope variable? Can anyone help me to fix this?
ng-repeat="user in users" should be added to the tr tag and not the div tag.
I am creating a web app in which I have a table and a checkbox if I check the checkbox I want to show how many numbers of rows are there in my table,
like:
<table>
<thead>
<tr>
<td>
<input type="checkbox" ng-model="checkall" ng-click="clickcheckall()"/>
</td>
<td>other td</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="somedata in table">
<td></td>
<td></td>
</tr>
</tbody>
</table>
and here I want to print this
{{showcheckalldata}}
in my controller I have a scope variable
$scope.showcheckalldata='';
what I need to do if I want to print number of columns?
You can just assign the number of elements in the array,
$scope.showcheckalldata= table.length;
DEMO
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.results = [{
"agence": "CTM",
"secteur": "Safi",
"statutImp": "operationnel"
},
{
"agence": "SMS",
"secteur": "Safi",
"statutImp": "operationnel"
}];
$scope.clickcheckall = function() {
$scope.showcheckalldata = $scope.results.length;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr>
<td>
<input type="checkbox" ng-model="checkall" ng-click="clickcheckall()"/>
</td>
</tr>
<tr>
<th>Agence</th>
<th>Secteur</th>
<th>StatutImp</th>
</tr>
<tr ng-repeat="result in results">
<td>{{result.agence}}</td>
<td>{{result.secteur}}</td>
<td>{{result.statutImp}}</td>
</tr>
</table>
<h1>Total rows are : {{showcheckalldata}}</h1>
</body>
</html>
I am creating a plunker for another question but I cannot get angular-datatables to sort without configuration.
I have code from a project that responds to sorting when users click on header columns but it just does not want to sort in plunkr.
Am I missing any sort of configuration or overlooking anything?
How do I make the table sortable using default settings?
Plunkr
https://plnkr.co/edit/71RqBQ0HF7ThDyZPpc1E?p=info
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.9.4" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script data-require="datatables#1.9.4" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="angular.js#1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="//rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl">
<div class="table-responsive">
<table datatable="ng" class="table" >
<thead style="background-color: #d8d8d8;">
<tr>
<th>Product</th>
<th>Tag Name</th>
<th>Unit Size</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr style="font-weight: 100;" ng-repeat="data in items | filter:{ TagName: filterTag, TagId: filterId} | filter:searchText" >
<td class="td-line-height" style="font-weight: 600;';">{{data.Product}}</td>
<td class="td-line-height">{{data.TagName}} </td>
<td class="td-line-height">{{data.UnitSize}} </td>
<td class="td-line-height">{{data.UnitCost | currency}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
for some reason angular-datatables.js is calling isDataTable function while jquery.dataTables.js defines this function as fnIsDataTable, so, to solve it, just add
$.fn.dataTable.isDataTable = $.fn.dataTable.fnIsDataTable;
as your first line in your controller.
here is the error message:
VM892 angular.js:9563TypeError: $.fn.dataTable.isDataTable is not a function
at Object.renderDataTable (VM1134 angular-datatables.js:753)
at Object.hideLoadingAndRenderDataTable (VM1134 angular-datatables.js:773)
at VM1134 angular-datatables.js:910
at VM892 angular.js:13777
at completeOutstandingRequest (VM892 angular.js:4236)
at VM892 angular.js:4537
updated plunker: https://plnkr.co/edit/TgpWLuiTDbb91yJeHYoX?p=preview
i am new to angular js, currently i display the values to view, using the appviewbatch object, i need to include controls such as list box for appviewbatch.odate with unique values and list box appviewbatch.status with unique values, upon selection of values from both the list box i need to filter and display in the table view..
could you kindly explain how can i do it.
<!DOCTYPE html>
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<script src="/LDODashBoard/js/scripts.js" language="JavaScript" type="text/javascript">
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="/LDODashBoard/css/mystyle.css" />
<meta charset="utf-8">
</head>
<body>
<div align="center" style="color:white">
<table id="table1"><caption> <STRONG> AppView DisplayPage </STRONG> <br> <br> </caption>
<tr>
<td> JobName </td>
<td> Description </td>
<td> ODATE </td>
<td> StartTime </td>
<td> EndTime </td>
<td> Status </td>
<td> RunDuration </td>
<td> CyclicJob </td>
</tr>
<c:forEach items="${appviewbatch}" var="appview">
<tr>
<td> ${appview.jobName}</td>
<td> ${appview.description}</td>
<td> ${appview.oDATE}</td>
<td> ${appview.startTime}</td>
<td> ${appview.endTime}</td>
<td> ${appview.status}</td>
<td> ${appview.runDuration}</td>
<td> ${appview.cyclicJob}</td>
</tr>
</c:forEach>
</table>
<br>
<c:url value="/L1OutputDisplayPage?gcmmLink2=true" var="messageUrl2" />
Click Here
to Close
</div>
</body>
</html>
you create an array in your controller. You might populate that array from an HTTP request using Angular's $http service.
In the view, you then use ng-repeat to iterate over items / objects in the array.
check out https://docs.angularjs.org/api/ng/directive/ngRepeat#example
I am writing a basic angular routing code ,in which if user clicks on show details the corresponding order id will be displayed.I am getting the error.Where am i going wrong ? I have added a sample HTML file.
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td>show details</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
You need the ngRoute module
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js
After you have this script in your html add it as a dependency
var sample=angular.module("sample",['ngRoute']);