I have now a Todolist but I want to have my Todolist with pagination :
when it reach 10 todos the next one will be on the 2dn page and then it will reach 20 the next one will on the 3rd page and so on. I would also that the list is updated when one of the todos is deleted
var app = angular.module("myapp", ['ui.bootstrap']);
app.controller('TodoCtrl', ['$scope', '$filter', function ($scope, $filter)
{
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 5;
$scope.list = [];
//thrid argument if we watch the list all the times
$scope.$watch('list', function()
{
$scope.remain = $filter('filter')($scope.list, {completed:false}).length;
}, true)
$scope.removeTodo = function(index)
{
//delete on element from index
$scope.list.splice(index, 1);
}
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.addTodo = function()
{
if ($scope.newTodo != '')
{
$scope.list.push(
{
// model newTodo
name : $scope.newTodo,
completed : false
})
}
else
alert("Message can not be empty !")
//to empty task
$scope.newTodo = '';
}
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5
/angular.min.js"></script>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<div ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="New todo" autofocus autocomplete="off" ng-model="newTodo">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li ng-repeat="todo in list.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-class="{completed: todo.completed}">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed">
<label>{{todo.name}}</label>
<button class="destroy" ng-click="removeTodo($index)"></button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<pagination page="currentPage" total-items=2 items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<span id="todo-count"><strong> {{ remain }} </strong> Todo(s) remaining
</span>
</footer>
</section>
</div>
<script src="js/app.js"></script>
<script src="js/MyTodoList.js"></script>
</body>
</html>
The only real change was to pagination. You need to supply an expression that it can watch to get the number of items.
I wasn't sure if you only wanted to only display ToDos if they aren't completed or not. If you do, I can modify the code to do that for you.
var app = angular.module("myapp", ['ui.bootstrap']);
app.controller('TodoCtrl', ['$scope', '$filter', function ($scope, $filter)
{
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 5;
$scope.list = [];
//thrid argument if we watch the list all the times
$scope.$watch('list', function()
{
$scope.remain = $filter('filter')($scope.list, {completed:false}).length;
}, true)
$scope.removeTodo = function(index)
{
//delete on element from index
$scope.list.splice(index, 1);
}
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.addTodo = function()
{
if ($scope.newTodo != '')
{
$scope.list.push(
{
// model newTodo
name : $scope.newTodo,
completed : false
})
}
else
alert("Message can not be empty !")
//to empty task
$scope.newTodo = '';
}
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5
/angular.min.js"></script>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<div ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="New todo" autofocus autocomplete="off" ng-model="newTodo">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li ng-repeat="todo in list.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-class="{completed: todo.completed}">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed">
<label>{{todo.name}}</label>
<button class="destroy" ng-click="removeTodo($index)">Remove</button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<pagination page="currentPage" total-items="list.length" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<span id="todo-count"><strong> {{ remain }} </strong> Todo(s) remaining
</span>
</footer>
</section>
</div>
<script src="js/app.js"></script>
<script src="js/MyTodoList.js"></script>
</body>
</html>
Related
Here's the Plunk Code can Verify Now also
http://next.plnkr.co/edit/vrI2haNy1zYPDcCWh7gj?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview
Java Script Code: it is containing dummy json there root node is Admin System and there sub menu are Like Angular, Linux, Server
Here UI will be shown as Given Below Format and this Menu will be able to Expendable and Close able or collapse so this will be fetch the data as from Service and same way can be use in project
angular.module('myapp', ['ui.bootstrap'])
.controller("MainController", ["$scope",
function($scope){
$scope.bodyText = "Test Menu";
$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}
$scope.isShowing = function(index) {
if($scope.activeParentIndex === index){
return true;
} else{
return false;
}
};
$scope.modulos =
[{"module":"Admin System ",
"adm_modulo_id":1,
"submodule":[{"res":"Angular","url":"#/admin/1"},
{"res":"Linux","url":"#/admin/2"},
{"res":"Server","url":"#/admin/3"}
]
}];
}]);
Html Code: it will show dummy json code as menu and sub-menu
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.x" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Test</h1>
<div ng-controller="MainController">
{{bodyText}}
<ul class="sidebar-menu" ng-repeat="m in modulos">
<li class="treeview" ng-repeat="(itemIndex, item) in modulos">
<a ng-click="showSubmenu(itemIndex)">
<i class="fa fa-table"></i> <span>{{item.module}}</span>
</a>
<ul class="sub-nav" ng-show="isShowing(itemIndex)">
<li ng-repeat="sub_element in m.submodule">
{{sub_element.res}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
If you can give any suggestions for both HTML and JS.
The HTML code for my application is given below:
<ul>
<li ng-repeat=" opt in bcfList track by $index" ><input type="checkbox" ng-model="bcfList[opt]" />
{{ opt }}
</li></ul>
The Controller.js for my application is given below:
$scope.bcfList=data.BCFNUMBER;
$scope.getbcfnumber = function(index) {
$scope.bcflist=data.BCFNUMBER;
console.log($scope.selected);
}
The BCFNUMBER is the key value of the list that am getting from backend controller.java using map functions.
If you can add include the sample value of for $scope.bcfList Will be able to help better.
Updated code with the json values sent for $scope.bcfList
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("myapp", []).controller('MainCtrl', ['$scope', function($scope) {
$scope.bcfList= ["BCF-0025", "BCF-0049", "BCF-0051", "BCF-0091", "BCF-0096", "BCF-0100", "BCF-0115", "BCF-0117", "BCF-0118", "BCF-0130"];
$scope.checkedbcfList = [];
$scope.checkedBcf = function(item) {
if($scope.bcfList[item]){
$scope.checkedbcfList.push(item);
}
else{
var index = $scope.checkedbcfList.indexOf(item);
if (index !== -1) {
$scope.checkedbcfList.splice(index, 1);
}
}
}
/*$scope.getbcfnumber = function() {
$scope.checkedbcfList = [];
angular.forEach($scope.bcfList, function (item, index) {
if($scope.bcfList[item]){
$scope.checkedbcfList.push(item);
}
});
}*/
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
<ul>
<li ng-repeat=" opt in bcfList track by $index">
<input type="checkbox" ng-model="bcfList[opt]" ng-change="checkedBcf(opt)"/> {{ opt }}
</li>
</ul>
<!--<input type="button" value="Get checked bcf" ng-click="getbcfnumber()"/> -->
<div>checked BCF list: {{checkedbcfList}}</div>
</body>
</html>
I am really new angular and I have been struggling with this issue all day long. I am trying to add check boxes dynamically to my html page using ng-repeat and bind their ng-data-model.
Here is my code :
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-data-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
ng-data-model is wrong. Use ng-model or data-ng-model
...
<input ng-model="value.disabled" type="checkbox">
...
Code:
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
Using the following code, I am successfully able to use this angularjs carousel.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
</script>
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
However, when I divide the content up into a subsequent app.js and then serve it as an html snippet including the carousel using ng-view as follows, it then doesn't work.
<body ng-app="app">
<div ng-include='"./templates/header.html"'></div>
<div ng-view></div>
<div ng-include='"./templates/footer.html"'></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
</body>
It seems it's not able to refer to the function? I get the following console error
angular.js:13708 Error: [ng:areq] Argument 'CarouselDemoCtrl' is not a function, got undefined
Any help would be greatly appreciated! I got the code for the carouseldemo from https://codepen.io/Fabiano/pen/LACzk
I am trying to load some ajax Content, but whenever i click on the link jQuery does not respond.
Heres my html with jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="e3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='img/site/loader.gif' alt='loading...' />";
// load() functions
$(document).ready(function()
{
$("#omtA").click(function()
{
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
}
);
);
</script>
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<a name="usrl"></a>
<div id="usr">
hans
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
But when I click on the the Omt link with the id omtA nothing happends.
I have also tried
$("a#omtA").click(function()
make the link a class and tried
$(".omtA").click(function()
and
$("a.omtA").click(function()
But none of that helped.
Use this.. You have missed the closing brace } ..
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
});
It looks like you are missing an ending brace:
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
}/* <- that brace was missing */);