My problem is that data is not show in Edit mode after page refresh before page refresh it display data but after page refresh modelpopup is blank.
My javascript code for edit functionality:
$scope.editBook = function (book) {
var getBookData = crudAJService.getBook(book.Id);
getBookData.then(function (_book) {
$scope.book = _book.data;
$scope.modal.content.bookId = book.Id;
$scope.modal.content.bookTitle = book.Title;
$scope.modalShown = !$scope.modalShown; //to display popup
}
}
My html view code is
<tr ng-repeat="book in books">
<td>{{book.Id}}</td>
<td>{{book.Title}}</td>
<td>
<span ng-click="editBook(book)">
Edit
</span>
</td>
</tr>
$scope.editBook = function (book) {
var getBookData = crudAJService.getBook(book.Id);
getBookData.then(function (_book) {
$scope.modal.content = book;//You have to initialize modal.content
$scope.book = _book.data;
$scope.modal.content.bookId = book.Id;
$scope.modal.content.bookTitle = book.Title;
$scope.modalShown = !$scope.modalShown; //to display popup
}
}
Related
i have a code like this:
<body ng-app="UserManagement" ng-controller="UserManagementController">
<h3>to do</h3>
<form ng-submit="addtodo();">
<table>
<tr><td colspan="2"><input type="checkbox" ng-model="employees.todo" /></td></tr>
<tr><td colspan="2">{{remng()}} of {{actuallength}} remaining</td></tr>
<tr ng-repeat="emp in employees">
<td><input type="checkbox" ng-model="emp.todo" /></td>
<td>{{emp.name}}</td>
</tr>
<tr>
<td><input type="text" ng-model="addemp" /></td>
<td><input type="button" value="Add" ng-click="addemps()"/></td>
</tr>
<tr>
<td><input type="button" value="Delete" ng-click="deleteemps();"/></td>
</tr>
</table>
</form>
</body>
here i am making simple add, delete operation of a list of employees. In the delete operation, when i click delete without checking any checkbox, the items with existing checked checkboxes are deleted, but when i click any checkbox and press delete, the clicked checkbox is not deleted this time, but when i click delete second time, it deletes.
Js code:
var app = angular.module("UserManagement", []);
//Controller Part
app.controller("UserManagementController", function($scope, $http) {
$scope.employees = [
{name:'Abhinav',todo:true},
{name:'Amit', todo:false},
{name:'Raghav',todo:true},
{name:'Sumit', todo:false},
{name:'Ashwani',todo:true},
{name:'Mihir', todo:false},
]
$scope.totalsel = $scope.employees.length;
$scope.actuallength = $scope.totalsel;
alert($scope.actuallength);
//$scope.addtodo = function(){}
//alert("ddd");
$scope.deleteemps = function(){
//alert($scope.employees.name);
$scope.deleted_emps = [];
//alert("in foreach: "+$scope.employees[2].todo);
angular.forEach($scope.employees, function(todos, index) {
//alert(todos.todo);
//alert(todos.name);
if(todos.todo){
// alert(index)
var deletednames = todos.name;
// var deletedtodo = todos.todo;
//$scope.deleted_emps.push(deletednames)
// alert(deletednames);
$scope.deleted_emps.push({name:todos.name, todo:todos.todo});
//var abc=angular.toJson($scope.deleted_emps);
// alert(index);
//console.log(angular.toJson(todos.name));
console.log("hiii: "+$scope.deleted_emps.name);
var indx;
for (var i=0; i<$scope.deleted_emps.length; i++) {
console.log("iii: "+$scope.deleted_emps[i].name);
console.log("i: "+$scope.employees[index].name);
//console.log($scope.employees[index].name.indexOf($scope.deleted_emps[i].name));
indx = $scope.employees[index].name.indexOf($scope.deleted_emps[i].name);
// alert(indx);
if (indx > -1) {
// alert(indx);
//$scope.employees.splice()
$scope.employees.splice(index, 1);
}
}
/* var indx;
for (var i=0; i<array2.$scope.deleted_emp; i++) {
indx = array1.indexOf(array2[i]);
if (indx > -1) {
array1.splice(indx, 1);
}
}
*/
}
$scope.actuallength = $scope.totalsel;
})
}
});
I am using angular js 1.6.1 . Thanks in advance.
I've made a fiddle based on your codes.
Add and Delete Employees
Sample code of mine is like this.
$scope.deleteEmp = function(){
var slicedEmps = [];
angular.forEach($scope.employees, function(e){
if(!e.isChecked){
slicedEmps.push(e);
}
});
$scope.employees = slicedEmps;
};
What I suggested is making new array instead of using 'splice'.
I hope this fiddle can help you. :)
Building a simple app that filters results based on an input field. I'm adding a bunch of links that are outside of the repeated list and when clicked I want to be able to filter the list below.
I've searched online for various ways of tackling this problem but have yet to find a solution.
I'm already filtering by search, however I'd like to be able to click a link that is a popular search entry.
My code is:
tag one
tag two
tag three
<tr ng-repeat="item in items | orderBy:'date' | filter:itemsFilter" ng-click="clickedItem(item.id)">
<td><img ng-src="{{item.imageUrl}}" alt="{{item.title}}"></td>
<td>
{{item.title}}<br>
</td>
<td><i class="el el-time"></i> {d{item.date}}</td>
<td class="drop-me">{{item.description}}</td>
<td class="tag-me">{{item.tag}}</td>
</tr>
<tr ng-hide="item.length == 0"><td><p>There are no items!</p></td></tr>
I've tried custom filters, just can't figure a way to inject the items via an ng-click and update the list below.
I'd like to click one of the tag links and it filter the list below
Thanks
As proposed in the comments you can create an array to which you're adding your tags for filtering and in a custom filter you can filter your items array.
Also ngTagsInput is a nice directive that's helping to create a input field with tags.
Please have a look at the demo below or this jsfiddle.
angular.module('demoApp', ['ngTagsInput'])
// filter from here (with some modifications) http://stackoverflow.com/questions/23785592/apply-dynamic-filters-using-tags
.filter('filterByTags', function() {
return function(items, tags) {
var filtered = []; // Put here only items that match
(items || []).forEach(function(item) { // Check each item
var matches = tags.some(function(tag) { // If there is some tag
return item.tag == tag.text;
}); // we have a match
if (matches) { // If it matches
filtered.push(item); // put it into the `filtered` array
}
});
return filtered.length == 0 ? items : filtered; // Return the array with items that match any tag // return all if no tags
};
})
.controller('mainController', MainCtrl);
function MainCtrl() {
var vm = this;
function isTagInTags(tag) {
var seen = false;
//console.log('test', tag);
for (var i = 0; i < vm.tags.length; i++) {
//console.log(vm.tags[i].text, tag);
if (vm.tags[i].text == tag) {
seen = true;
return seen;
}
}
return seen;
}
vm.addTag = function(tag) {
//console.log(tag);
if (!isTagInTags(tag)) {
vm.tags.push({
text: tag
});
}
};
vm.data = [{
id: 0,
tag: 'JavaScript',
title: 'this is JS related'
}, {
id: 1,
tag: 'Java',
title: 'this is Java related'
}, {
id: 2,
tag: 'Python',
title: 'this is Python related'
}, {
id: 3,
tag: 'Python',
title: 'also Python stuff...'
}];
var unique = [];
vm.availTags = [];
for (i in vm.data) {
var item = vm.data[i];
//console.log(item);
if (unique.indexOf(item.tag) === -1) {
unique.push(item.tag);
vm.availTags.push(item.tag);
}
}
vm.loadItems = function(query) {
//console.log(query);
return vm.availTags.filter(function(tag) {
var testTag = tag.toLowerCase();
return testTag.indexOf(query.toLowerCase()) >= 0;
});
//return $http.get('/tags?query=' + query); // use this with a backend
}
//console.log(vm.availTags);
vm.tags = []; //vm.availTags[0];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.css" rel="stylesheet" />
<div ng-app="demoApp" ng-controller="mainController as ctrl">
<button ng-click="ctrl.addTag('JavaScript')">
JavaScript
</button>
<button ng-click="ctrl.addTag('Java')">
Java
</button>
<!--{{ctrl.tags}}-->
<tags-input ng-model="ctrl.tags">
<auto-complete source="ctrl.loadItems($query)"></auto-complete>
</tags-input>
<div ng-repeat="item in ctrl.data | filterByTags: ctrl.tags">
{{item.title}}
</div>
</div>
try addition ng-href
<a ng-href="">tag one</a>
<a ng-href="">tag two</a>
<a ng-href="">tag three</a>
<tr ng-repeat="item in items | orderBy:'date' | filter:itemsFilter" ng-click="clickedItem(item.id)">
<td><a ng-href="{{item.url}}"><img ng-src="{{item.imageUrl}}" alt="{{item.title}}"></a></td>
<td>
<a ng-href="{{item.url}}">{{item.title}}</a><br>
</td>
<td><i class="el el-time"></i> {d{item.date}}</td>
<td class="drop-me">{{item.description}}</td>
<td class="tag-me">{{item.tag}}</td>
</tr>
<tr ng-hide="item.length == 0"><td><p>There are no items!</p></td></tr>
I am completely stumped on how to achieve something specific that the below website has achieved. Does anyone know how to update the quantity of a product from the product details page to the shopping cart, and have that quantity shared/bound between the cart and and the product details page for each an every product repeated from a collection. (I am not talking about simply having a global cart quantity total via a simple custom directive). Please see the link below. Add a product to the cart and then update the quantity from both the product page and from the cart itself. This is what I am trying to achieve. Thank you all in advance!
http://demo.shopnx.in/
Typically you'll get better responses if you post some code that you have tried and then ask to be guided on where you are going wrong. I've created a simple JSFiddle to demonstrate one method of doing this. It is extremely simple, contrived, not production worthy by any stretch of the imagination and doesn't really do much, but it should show you one construct that will allow you to accomplish the functionality you're after.
The key is to use some type of shared storage so that the same array of items is available to both your product listing and the cart. In the sample I have done this using a Value:
.value('cartStorage', {
items: []
})
This value is then injected in the main controller:
.controller('mainController', function(cartStorage) {
var _this = this;
_this.cartStorage = cartStorage;
_this.items = [{
name: 'Apple',
price: .5,
quantity: 0,
showAddToCart: false,
addedToCart: false
}, {
name: 'Orange',
price: .5,
quantity: 0,
showAddToCart: false,
addedToCart: false
}, {
name: 'Grapes',
price: 1,
quantity: 0,
showAddToCart: false,
addedToCart: false
}];
_this.addToCart = function(item) {
_this.cartStorage.items.push(item);
item.addedToCart = true;
}
_this.increaseItemAmount = function(item) {
item.quantity++;
item.showAddToCart = true;
}
_this.decreaseItemAmount = function(item) {
item.quantity--;
if (item.quantity <= 0) {
item.quantity = 0;
item.addedToCart = false;
item.showAddToCart = false;
var itemIndex = _this.cartStorage.items.indexOf(item);
if (itemIndex > -1) {
_this.cartStorage.items.splice(itemIndex, 1);
}
} else {
item.showAddToCart = true;
}
}
})
As well as the cart controller:
.controller('cartController', function(cartStorage) {
var _this = this;
_this.cartStorage = cartStorage;
_this.increaseItemAmount = function(item) {
item.quantity++;
}
_this.decreaseItemAmount = function(item) {
item.quantity--;
if (item.quantity <= 0) {
item.quantity = 0;
item.addedToCart = false;
item.showAddToCart = false;
var itemIndex = _this.cartStorage.items.indexOf(item);
if (itemIndex > -1) {
_this.cartStorage.items.splice(itemIndex, 1);
}
}
}
_this.removeFromCart = function(item) {
item.quantity = 0;
item.addedToCart = false;
item.showAddToCart = false;
var itemIndex = _this.cartStorage.items.indexOf(item);
if (itemIndex > -1) {
_this.cartStorage.items.splice(itemIndex, 1);
}
}
})
Now the cartStorage object is shared so any update made in one controller will automagically be reflected in the other controller. All that's left is the markup:
<div ng-app="app">
<div ng-controller="mainController as main">
<h2>Main Controller</h2>
<div>
<table>
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td></td>
</tr>
<tr ng-repeat="item in main.items">
<td>{{item.name}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.quantity}}</td>
<td>
<button ng-click="main.increaseItemAmount(item)">+</button>
<button ng-click="main.decreaseItemAmount(item)">-</button>
<button ng-click="main.addToCart(item)" ng-show="item.showAddToCart && !item.addedToCart">Add to Cart</button>
</td>
</tr>
</table>
</div>
</div>
<div ng-controller="cartController as cart">
<h2>Cart Controller</h2>
<div>
<table>
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td></td>
</tr>
<tr ng-repeat="item in cart.cartStorage.items">
<td>{{item.name}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.quantity}}</td>
<td>
<button ng-click="cart.increaseItemAmount(item)">+</button>
<button ng-click="cart.decreaseItemAmount(item)">-</button>
<button ng-click="cart.removeFromCart(item)">Remove from Cart</button>
</td>
</tr>
</table>
</div>
</div>
</div>
Update showing the usage of a Factory instead of Value
Instead of using a Value use this service:
.factory('cartStorage', function() {
var _cart = {
items: []
};
var service = {
get cart() {
return _cart;
}
}
return service;
})
Then modify the code in the controllers to use the .cart property of the service instead of the value. You only need to change one line of code in both controllers. Change:
_this.cartStorage = cartStorage;
to:
_this.cartStorage = cartStorage.cart;
Here is an updated JSFiddle.
I made this plunker as an example.
I've used events to achieve the desired behavior. (
This is just one way of doing this, should have a lot of possibilities)
ProductsController:
app.controller('ProductsCtrl', function($scope, $rootScope) {
$scope.products = [
{
'name': 'Product One',
'price': 10,
'qty': 0
},
{
'name': 'Product two',
'price': 20,
'qty': 0
}
];
// Fire event to add
$scope.add = function(product) {
product.qty++;
$rootScope.$broadcast('addProduct', product.price);
}
// Fire event to remove
$scope.remove = function(product) {
if(product.qty > 0) {
product.qty--;
$rootScope.$broadcast('removeProduct', product.price);
}
}
});
CartController:
app.controller('CartCtrl', function($scope) {
$scope.total = 0;
// Catch the event to add
$scope.$on('addProduct', function(event, data) {
$scope.total += data;
});
// Catch the event to remove
$scope.$on('removeProduct', function(event, data) {
$scope.total -= data;
});
});
View:
<div ng-controller="CartCtrl">Total: {{total}}</div>
<br>
<div ng-controller="ProductsCtrl">
<div ng-repeat="product in products">
<span>Name: {{product.name}}</span>
<br>
<span>Price:{{product.price}}</span>
<span>Quantity:{{product.qty}}</span>
<br>
<button type="button" ng-click="add(product);">Add</button>
<button type="button" ng-click="remove(product);">Remove</button>
<br><br><br>
</div>
</div>
You can have a shared service between your Product details and Cart detail controller which can have an array where you can push the the Product selected with its quantity and other details.
I have a dropdownlist which contains brand ids. acccording to the id im fetching corresponding products and showing it in a table. There are two buttons in each row that move the products up and down basically by interchanging the ranks. now i am able to do all the functionality of interchanging and re binding.The row is selected when it is clicked. my only problem is i am not able to select the row after it has moved up or down.
<div ng-app="myapp" ng-controller="prodctrl">
<select id="BrandDropdown" class="InstanceList" ng-change="GetBrandProd()" ng-model="Products">
<option>Select Brand</option> //Sample Data
<option value=1>Brand 1<option>
<option value=2>Brand 2<option>
</select>
<table id="prodtab" ng-model="Products">
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{selected}}">
<td>{{P.Id}}</td>
<td>{{P.Rank}}</td>
<td>{{P.Name}}</td>
<td>
<input type="button" value="Move Up" id="moveup" ng-click="getval(P,$index)" /></td>
<td>
<input type="button" value="Move Down" /></td>
</tr>
</table>
</div>
this is the angularjs code
<script>
var app = angular.module('myapp', []);
var prod = null;
var mveup = null;
var mvedwn = null;
var ind = null;
app.controller('prodctrl', function ($scope, $http) {
//getting products for each brand
$scope.GetBrandProd = function () {
cursel = "B";
var Id = $('#BrandDropdown').val();
fetchtype = Id;
brid = Id;
$http({
method: "GET",
url: "/Home/GetProdBrand",
params: {
id: Id
}
})
.success(function (response) {
var data = response;
$scope.Products = data;
prod = data;
});
};
//changing color of row when clicked
$scope.setselected = function (index) {
if ($scope.lastSelected) {
$scope.lastSelected.selected = '';
}
if (mveup == null) {
this.selected = 'trselected';
$scope.lastSelected = this;
}
else {
mveup = null;
//this.selected = '';
$(this).closest('tr').prev().prop('Class', 'trselected');
}
};
//function to move product up in ranking
$scope.getval = function (p, index) {
var Idcur = p.Id;
var Rankcur = p.Rank;
ind = index;
if ($scope.Products[index - 1] != null) {
var IdPrev=$scope.Products[index - 1].Id;
var Rankprev = $scope.Products[index - 1].Rank;
mveup = null;
$scope.lastSelected = this;
if (cursel == "B") {
fetchtype = brid;
}
else if (cursel == "C") {
}
mveup = true;
$http({
method: "GET",
url: "/Home/MoveProd",
params: {
Curid: Idcur,
CurRank: Rankcur,
ChngId: IdPrev,
ChngRnk: Rankprev,
Type: cursel,
Id: fetchtype
}
})
.success(function (response) {
// ranks are interchanged and the data is returned.
var data = response;
$scope.Products = data;
prod = data;
});
}
}
})
</script>
It seems, the way you are handling the row selection is not correct.
I have just changed the way of handling selection here.
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" ng-class="{selected: selectedIndex == $index}">
//JS
$scope.setselected = function(index) {
$scope.selectedIndex = index;
};
Also, I have done a plunker with some sample values to imitate your requirement, you can ask more, if it is not fit to your requirement.
Plunker
You already have the id of the product that was clicked on (I think from looking at your code, it's Idcur), so you could loop over your results in the success block of the /Home/MoveProd GET request and set the record with the matching id to selected? Something like
var products = $scope.Products.filter(function(product) {
return product.id == Idcur;
})
if (products && products.length > 0) {
products[0].selected = 'trselected';
}
then, in your page, just update the ng-repeat slightly to pick the selected class from the product, instead of the scope, so:
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{selected}}">
becomes
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{P.selected}}">
or something like that :)
Hi am using firebase and angularfire as a backeng for an account web app,
am having problem design logic to handle this feature
Get object in ng repeat table
$scope the object into a form - and allow editing
save the updated $scope to the object( // maybe object key or $id
$scope.records = $firebaseArray(data_records);
// updating value
$scope.updateValue = {};
$scope.key = null;
$scope.showDoUpdate = false;
$scope.openUpdate = function(record, key) {
$scope.showDoUpdate = true;
$scope.updateValue.customerCode = record.customerCode;
$scope.updateValue.credit = record.credit;
$scope.updateValue.debit = record.debit;
$scope.updateValue.property_no = record.property_no;
$scope.updateValue.arrears = record.arrears;
$scope.updateValue.closingBlance = record.closingBlance;
$scope.key = key;
};
$scope.closeUpdate = function() {
$scope.records[key] = $scope.updateValue;
$scope.records.$save();
$scope.updateValue = {};
$scope.key = null;
$scope.showDoUpdate = false;
};
and in my html
<tbody>
<tr ng-repeat="(key,record) in records">
<td>{{records.customerCode}}</td>
<td>{{records.property_no}}</td>
<td>
<button class="btn" ng- click="openUpdate(key,record)">edit</button>
</td>
<!--form ...........
<button ng-click="closeUpdate()" class="btn ">Save</button>
$index will help you. Try something like...
ng-repeat="rec in records"
Then in your ng-click:
ng-click="openUpdate(records[$index].record, records[$index].key)"
Which will call...
$scope.openUpdate = function(record, key) {
$scope.key = key;
//other work
};