Almost everything working good beside 2 things
Code
var app = angular.module("MyApp", []);
app.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});
app.controller("MyControler", function($scope, $http, $filter) {
$http.get("http://127.0.0.1:8000/cars/?format=json").
success(function(data) {
$scope.list = data;
});
$scope.itemsPerPage = 1;
$scope.currentPage = 0;
$scope.items = [];
for (var i=0; i<50; i++) {
$scope.items.push({ id: i, name: "name "+ i, description: "description " + i });
}
$scope.range = function() {
var rangeSize = 3;
var ret = [];
var start;
start = $scope.currentPage;
if ( start > $scope.pageCount()-rangeSize ) {
start = $scope.pageCount()-rangeSize+1;
}
for (var i=start; i<start+rangeSize; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function() {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function() {
return Math.ceil($scope.filtered.length/ $scope.itemsPerPage)-1;
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function() {
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};
$scope.setPage = function(n) {
$scope.currentPage = n;
};
var filterBy = $filter('filter');
$scope.$watch('search', function (newValue) { $scope.filtered = filterBy($scope.list, newValue); }, true);
});
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% verbatim %}
<div ng-app="MyApp" ng-controller="MyControler">
<table class="table table-striped">
<thead>
<tr>
<th><input ng-model="search.name" ></th>
<th><input ng-model="search.years"></th>
<th><input ng-model="search.owners"></th>
<th><input ng-model="search.accidents"></th>
<th><input ng-model="search.description"></th>
</tr>
<tr>
<th>Name</th>
<th>Years</th>
<th>Owners</th>
<th>Accidents</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cars in filtered| offset:currentPage*itemsPerPage | limitTo: itemsPerPage">
<td>{{cars.name}}</td>
<td>{{cars.years}}</td>
<td>{{cars.owners}}</td>
<td>{{cars.accidents}}</td>
<td>{{cars.description}}</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">
<div class="pagination">
<ul>
<li ng-class="prevPageDisabled()">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
{{n+1}}
</li>
<li ng-class="nextPageDisabled()">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
</table>
</div>
{% endverbatim %}
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="{% static 'js/app2.js' %}"></script>
</html>
My objects are displayed only when i start typing into filter field, as i see after pagination is updated actively with typing but then happening sth strange, pagination displayed also pages with minuses ?
So i would like to make items showed already without starting typing into filter and make these minuses disappear.
Thanks ;)
var app=angular.module('MyApp', []);
app.controller("MyControler", function($scope, $http, $filter) {
$http.get("http://127.0.0.1:8000/cars/?format=json").
success(function(data) {
$scope.list = data;
});
$scope.currentPage = 0;
$scope.pageSize = 1;
$scope.numberOfPages=function(){
var myFilteredData = $filter('filter')($scope.list, $scope.search);
return Math.ceil(myFilteredData.length/$scope.pageSize);
};
});
app.filter("offset", function() {
return function(input, start) {
start = +start;
return input.slice(start);
};
});
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% verbatim %}
<div ng-app="MyApp" ng-controller="MyControler">
<table>
<tr>
<th><input type="text" ng-model="search.name" class="form-control input-sm" placeholder="SEARCH" ></th>
<th><input type="text" ng-model="search.years" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.owners" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.accidents" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.description" class="form-control input-sm" placeholder="SEARCH"></th>
</tr>
<tr>
<th>Name</th>
<th>Years</th>
<th>Owners</th>
<th>Accidents</th>
<th>Description</th>
</tr>
<tr ng-repeat="cars in list | filter:search|offset:currentPage*pageSize | limitTo:pageSize">
<td>{{cars.name}}</td>
<td>{{cars.years}}</td>
<td>{{cars.owners}}</td>
<td>{{cars.accidents}}</td>
<td>{{cars.description}}</td>
</tr>
</table>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="(currentPage + 1) == numberOfPages()" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
{% endverbatim %}
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="{% static 'js/app2.js' %}"></script>
</html>
Solved
Related
before saving data in localstorage I have to verify whether user fill all the inputs.everything work fine with the exeption of input validation. up to the moment i'm not good familiar with the Angularjs.
any help highly appreciated
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.d1 = [];
$scope.d2 = [];
$scope.data = [];
$scope.append = function() {
$scope.data.push([]);
};
$scope.save = function() {
for (var i = 0; i < $scope.d1.length; i++) {
if ($scope.d1[i].length === 0) {
alert("fill empty fields please");
} else {
localStorage.setItem('Surname', JSON.stringify($scope.d1));
}
}
for (var j = 0; j < $scope.d2.length; j++) {
if ($scope.d2[j].length === 0) {
alert("fill empty fields please");
} else {
localStorage.setItem('Name', JSON.stringify($scope.d2));
}
}
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div class="btn-group">
<button ng-click="append()" type="button" class="btn btn-default">append</button>
<button ng-click="save()" type="button" class="btn btn-default">Save</button>
</div>
<table class="table table-bordered">
<tr>
<th>Surname</th>
<th>Name</th>
</tr>
<tr ng-repeat="x in data">
<td><input ng-model="d1[$index]" type="text" class="form-control"></td>
<td><input ng-model="d2[$index]" type="text" class="form-control"></td>
</tr>
</table>
</div>
</body>
</html>
Add element Name in input and use 'required' to make the field mantatory
<form name="myForm" novalidate>
..........................
<td><input ng-model="d1[$index]" type="text"
required name="text{{$index}}" class="form-control"></td>
<td><input ng-model="d2[$index]"
type="text" required name="text{{$index}}"class="form-control"></td>
........</form>
Before doing save operation check weather form valid or invalid
$scope.save = function() {
if($scope.myForm.$valid){
//add code
}else{
//display error message
}
}
We can display field level validation also Please refer here
I have written this code in AngularJS where I want to add item name, price and quantity. This item is represented in lower table and saved as an array. Later, I am finding the total bill.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "text" ng-model="price"></td>
<td><input type = "text" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button onClick="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.createItem = function($scope) {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
</script>
</body>
</html>
Please guide me what I am doing wrong that it's not working, and how to collect this array as an object to save in DB. I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.
Thanks in advance.
There are multiple issues with your code.
1.Syntax error: not closed controller.
2.Your controller is myCtrl but you used OnlineShopping in angularjs code
3.$scope.items is not defined.use this in controller $scope.items = []
4.you should call addItem as $scope.addItem
5.Onclick will not work with angular you should use ng-click
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<br>
<h3>Total : <span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];$scope.total = 0;
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = ($scope.price * $scope.quantity).toFixed(2);;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
$scope.totalBill($scope.items);
};
$scope.totalBill = function (items) {
var total = 0;
for(var i = 0; i < $scope.items.length; i++){
var item = $scope.items[i];
total += (item.quantity*item.price);
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
});
</script>
So many syntax errors in your code: I've prepared code pen for your code
[check here][1]
you missed closing breaket you missed some scooping . please check code pen code this will help you
[1]: https://codepen.io/sumit-jaiswal/pen/LLdbRV?
so your code he
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "number" ng-model="price"></td>
<td><input type = "number" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.items = [];
$scope.createItem = function() {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
})
</script>
try this code there are a lots of mistake
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item)
};
$scope.totalBill = function (items) {
$scope.total = 0;
for (var item in items) {
total += item.cost;
}
$scope.total = total;
};
});
</script>
</body>
</html>
I am new to AngularJS, and am working on my first Plunkr. When a user performs a search (from main.html, the corresponding controller is MainController), the correct view is being presented (user.html), but the data from the controller (UserController) is not being passed to the view. What am I doing wrong?
Here the link to the code:
http://plnkr.co/edit/OcfB6tBB36qWO9MiZ9CI?p=preview
Layout page (Index.html):
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
<script src="UserController.js"></script>
</head>
<body>
<h1>GitHub Viewer</h1>
<div ng-view></div>
</body>
</html>
Main page (main.html)
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="User name to find" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
User details page (user.html)
<h1>{{ user.name }}</h1>
{{ error }}
<div><img src="{{ user.avatar_url }}" title="{{user.name}}"> Order:
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Repos</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy:repoSortOrder">
<td>{{ repo.name }}</td>
<td>{{ repo.stargazers_count | number}}</td>
<td>{{ repo.language }}</td>
</tr>
</tbody>
</table>
MainController.js - controls main.html:
var app = angular.module('githubViewer');
app.controller('MainController', function($scope, $http, $interval,
$log, $anchorScroll, $location) {
$scope.repoSortOrder = "-stargazers_count";
$scope.search = function(username) {
$log.info("Searching for " + username);
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
var decrementCountdown = function() {
$scope.countdown -= 1;
if($scope.countdown < 1) {
$scope.countdown = null;
$scope.search($scope.username);
}
};
$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
});
UserController.js (controls user.html) -- this is where it seems to fail.
var app = angular.module('githubViewer');
app.controller("UserController", UserController);
var UserController = function($scope, $log, $http, $routeParams) {
var onUserComplete = function(response) {
$scope.user = response.data;
$http.get($scope.user.repos_url)
.then(onRepos, onError);
};
var onRepos = function(response) {
$scope.repos = response.data;
$location.hash("userDetails");
$anchorScroll();
};
var onError = function(reason) {
$scope.error = "Could not fetch the data";
};
$scope.username = $routeParams.username;
$scope.repoSortOrder = "-stargazers_count";
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
};
Any help will be appreciated.
I am new to AngularJs. It's a GitHub, datacontroller AngularJs program. Actually the data after using a controller, i.e checkbox is not coming and my ng-repeat is not working.
Can any anyone help me with this?
(function() {
var app = angular.module('app', []);
var mainController = function($scope, $http) {
$scope.message = "Angularjs";
$scope.reposortorder = "stargazers_count";
var onSuccess = function(response) {
$scope.obj = response.data;
$http.get($scope.obj.repos_url).then(onRepoSuccess, onError);
};
var onRepoSuccess = function(response) {
$scope.repos = response.data;
};
var onError = function(reason) {
$scope.error = "could not load the user details";
};
$scope.search = function(username) {
$http.get("https://api.github.com/users/" + username).then(onSuccess, onError);
};
};
var checkbox = function($scope, $filter, $http) {
$http.get("https://api.github.com/users/"+$scope.username)
.success(function(data) {
$scope.repos = data;
});
$scope.chckedIndexs = [];
$scope.checkedIndex = function(repo) {
if ($scope.chckedIndexs.indexOf(repo) === -1) {
$scope.chckedIndexs.push(repo);
} else {
$scope.chckedIndexs.splice($scope.chckedIndexs.indexOf(repo), 1);
}
};
$scope.selectedRepos = function() {
return $filter('repo.name')($scope.repos, {
checked: true
});
};
$scope.remove = function(index) {
angular.forEach($scope.chckedIndexs, function(value, index) {
var index = $scope.repos.indexOf(value);
$scope.repos.splice($scope.repos.indexOf(value), 1);
});
$scope.chckedIndexs = [];
};
$scope.checkAll = function() {
angular.forEach($scope.repos, function(repo) {
repo.select = $scope.selectAll;
});
};
};
app.controller("mainController", mainController);
app.controller("checkbox", checkbox);
}())
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Hello {{message}}</h1>
{{username}}
<div>
<form name="searchUser">
<input type="search" required placeholder="Github Username to find" ng-model="username">
<input type="submit" value="Search" ng-click="search(username)">
</form>
<br />
<div>{{ error}}</div>
<p>Name: {{ obj.name }}</p>
<p>Mail id: {{ obj.email }}</p>
<p>Image:
<br /><img ng-src="{{ obj.avatar_url}}" height="150" title="{{ obj.name}} {{obj.lastName}}" /></p>
<div>
<label>Search:</label>
<input type="search" ng-model="searchrepo" placeholder="Enter to Search">
</div>
<div ng-controller="checkbox">
<p>
Sort by:
<select ng-model="reposortorder">
<option value="name">Name</option>
<option value="stargazers_count">Stars</option>
<option value="language">Language</option>
</select>
</p>
<div>
<pre>selected with helper function {{selectedRepos()}}</pre>
<button ng-click="remove($index)">delete selected</button>
</div>
<table border="1">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="checkAll"></th>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos |filter:searchrepo | orderBy:reposortorder">
<td><input type="checkbox" ng-model="repo.checked" ng-click="checkedIndex(repo)"/></td>
<td>{{ repo.name }}</td>
<td>{{ repo.stargazers_count | number }}</td>
<td>{{ repo.language}}</td>
<td><button ng-click="remove($index)">x </button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Here is the plnkr link https://plnkr.co/edit/T3AK2QnIMq18oEeMuCQk?p=preview
<div ng-controller="table">
This line is reason of malfunctioning. You don't have any "table" controller. You bind repos in your mainController. Remove the "table" controller from that div, everything will work!
Thanks
I have an issue in the Edit Part of a Simple Angular Todo App That I created.
My App Adds, deletes and Edits an Entry. I have used AngularJS and BootStrap for this.
The prolem is, when I press edit button, all the entries, get into edit mode instead of the entry that I want to edit.
I am not sure why the in place edit is not working as expected.
My HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="todo.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<h1>My TODO List</h1>
<table class="table">
<thead>
<tr>
<td><input class="form-control" ng-model="todo"></td>
<td><button class="btn btn-primary" ng-click="addItem()">Add</button></td>
</tr>
<tr>
<th>Serial No</th>
<th>Tasks to be Completed</th>
<th>Action</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="todo in todolist">
<td >{{$index+1}}</td>
<td ng-hide="todo.selected == true">{{todo.task}}</td>
<td><input class="form-control" ng-show="todo.selected == true" ng-model="todo.task">
<button class="btn btn-success" ng-show="todo.selected == true" ng-click="save($index)">Save</button>
<button class="btn btn-danger" ng-show="todo.selected == true" ng-click="cancel($index)">Cancel</button>
<button class="btn btn-warning" ng-click="edit($index)" ng-hide="todo.selected == true">Edit</button>
<button class="btn btn-danger" ng-click="deleteItem($index)" ng-hide="todo.selected == true">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
My JavaScript Code:
angular.module("myApp",[])
.controller("myCtrl", function($scope){
$scope.todolist = [];
$scope.addItem = function(){
console.log($scope.todo);
if($scope.todo === undefined){
return false ;
}
else{
$scope.todoObj = {};
$scope.todoObj["task"] = $scope.todo;
$scope.todoObj["selected"] = false;
$scope.todolist.push($scope.todoObj);
$scope.todo = "";
console.log($scope.todolist);
}
}
$scope.deleteItem = function($index){
var index =$index;
$scope.todolist.splice(index,1);
}
$scope.edit = function($index){
for(var i=0; i< $scope.todolist.length; i++)
if($index == i){
$scope.todolist[i].selected = true;
}
}
$scope.save = function($index){
console.log("saving contact");
console.log($scope.todolist.length)
for(var i=0; i< $scope.todolist.length; i++){
if($index == i){
console.log($scope.todolist[$index]);
$scope.todolist[i] = `enter code here`angular.copy($scope.todolist[$index]);
// $scope.todolist[i] = $scope.todolist[$index];
$scope.todolist[i].selected = false;
console.log("todo after save",$scope.todolist);
}
}
}
$scope.cancel = function($index) {
for(var i=0; i< $scope.todolist.length; i++){
if ($scope.todolist[$index].selected !== false) {
$scope.todolist[$index].selected = `enter code here`$scope.todolist[i];
$scope.todolist[$index].selected = false;
}
}
};
})
When you are setting this
$scope.editing = $scope.todolist.indexOf(item);
All of your ng-repeats are relying on this to hide/show themselves.
ng-show="editing"