I have a page with a list of items on it. Each row has a button. By pressing a button list item is added to another list on the same page (it's a typical "order" form). I'm using angular ng-repeater to show the first list. After user press a button an item info is added to JSON varaible. The question is what's the best way to show user's choice list on the same page? So far I'm think of adding an attribute to the first list so when user choose it, it'll be shown in the second list. But I also want first list to be modified by user without any changes to the second one. Any ideas?
Check the code below, the button ng-click directive is calling the function AddtoList2($index) to add the current List1 item to List2, optionally it removes the current item from List1.
At template side
<div ng-repeat="item1 in List1">
...
<input type="button" ng-click="AddtoList2($index)" />
</div>
<div ng-repeat="item2 in List2">
...
</div>
At controller side
$scope.List1 = [];
$scope.List2 = [];
$scope.AddtoList2 = function (idx) {
var item = $scope.List1[idx];
$scope.List2.push(item);
//If you want to remove from List 1
$scope.List1.splice(idx, 1)
};
Related
In a webpage, I have a select HTML list from which the user can select an item and change its price. I put the select and, below, an input text box. Its default value needs to be the current price of the element, so the user can see it and change it. However, when I change the selected item in the dropdown menu, the input text box continues to show the last item's price. I think that by refreshing the page the moment the user clicks the option in the dropdown, this will be fixed, but I don't know how. I hope the doubt was clear enough please tell me if you don't understand something. I would appreciate all your help!!
I was waiting for you to show some code, but you didn't, so according to your problem you don't need to reload the page, you need to handle the events properly, that's all, so I made this example for you, I have already said that you can use location.reload and other stuff, but that was because then I haven't read the body of your question just yet and I was just answering according to the title of the question, anyway here is the example, I have added some comments to make it clear for you to understand the code
// an example of some products and the price of each one
var products = {"ring": 2.54, "watch": 4.99, "necklace": 3.21},
// get the `<select>` dom element
productsList = document.querySelector("#products-container select"),
// get the `<input type="text">` dom element
productPrice =document.querySelector("#products-container input");
// set the value of the price input to the first product's price
productPrice.value = Object.values(products)[0];
// loop over the products and create an option for each one
for(var product in products) {
productsList.innerHTML += `<option value="${product}">${product}</option>`;
}
// when the user chooses a product we show its price on the price input
productsList.onchange = function() {
productPrice.value = products[this.value];
}
// when the user changes the price of an element we save that into our object of elements
productPrice.onchange = function() {
products[productsList.value] = this.value;
}
<div id="products-container">
<select>
</select>
<input type="text">
</div>
I am having a scenario where I have repeat items list with having check box on each item and "Select All" functionality also on page header section and if either I select one item or select all (Multiple), the add to cart button gets activated( Default disable and enable when any item in the list is checked or selected ) .
But now the point is Addtocart functionality of ng-cart directive is written in a way that the Addtocart button should be on each item in list., but the scenario that I have is that I have to first check either one item or multiple then having only one Addtocart button to make or add single or multiple items added in one go .
Help me with this.
Resources :
https://github.com/snapjay/ngCart
As given in the documentation and also the source code, there is a method addItem on ngCart service which can be used to add items to the cart like :
ngCart.addItem(id, name, price, quantity, data);
So, In your case, once you check if one/more items are checked, you can call this method by looping through each of your checked items.
Make sure you add the module ngCart in your app module dependencies and the service ngCart in your Controller to access all the shared methods of the service.
Make below changes to get it working :
docListView.html :
// Added this button for testing
<button ng-click="addItem()">AddToCart</button>
docListController.js :
//Inject 'ngCart' service in the controller as a dependency.
docListController.$inject = ["$scope", "ngCart"];
//function that will be called when `AddToCart` button is clicked,
//where each selected item is added to the cart.
$scope.addItem = function (){
angular.forEach($scope.seletedDocumentsCollection.selectedValues, function (selectedItem) {
ngCart.addItem(selectedItem.isbn, selectedItem.login, selectedItem.price);
});
}
I am trying to use the selected radio as a reference to it's index within its array so that I may add more children in it's sub array (using the selected radio).
So here's what I have:
<div class="fakeTableRow" ng-repeat="parent in listTable">
<div class="strcutionLeft"></div>
<!-- parent levels -->
<div class="strcutionCRight saInstrcutionTitle"><div class="parentSub1"> <input type="radio" name="levelCheckDat" ng-model="levelChecker" value="{{$index}}">{{parent.name}}</div></div>
</div>
And then outside of this (above) there is a button that when pushed calls a function, inside that function I would like a reference to the index the radio is in so I may then drop children inside. Here is my attempt at that:
$scope.submitNewSub = function(){
//get index of radio
console.log($scope.levelChecker.indexOf($scope.levelChecker));
// .....continue function with index stored
});
My assumption was that the radios are stored in their own scope, however if i simply log ($scope.levelChecker) it comes back undefined, so i believe I am thinking about this wrong, I just cannot seem to figure out how.
To be clear, I am just trying to figure out the index (in the ng-repeat) of the selected radio with the model of levelChecker. Thanks for reading!
Edit: i swapped the value of the button to the {{$index}} to see if i could pull a value off by just calling the scope
Well the problem is quite simple...
I have an array of movies div (image and desc) written with a simple ng-repeat...
Now when i choose one of them i want to do the following (A game of positions i suppose):
1)I want to take out that element from the array and with a smooth animation to enlarge it to some other place in the screen, without breaking the order of that array.
2)when i choose another film, i want that one that i selected before to get back to where it was, following my newly selected film to take the space of the one before it:
here is a simple practice page i created so someone can dig it more:
http://single.org.il/
(just press on one of the categories up there,a list of movies will appear down at the bottom of the page, the black screen in the middle is where i want my selected film to enter, it's allready happening but it breaks, a lot)
Thank you very much!
I recommend including the selection state as part of the data model, then binding the view based on the selection data. The important points being:
Track the selected item as part of the $scope, and selection state as part of the item data
Filter selected items out of the navigation list
Bind the detail view to the selected item
I created a simplistic jsfiddle to demonstrate the concept, http://jsfiddle.net/ZLvQD/1/. The key code points include the filtered navigation list:
<div ng-controller="ListController">
<ul>
<li ng-repeat="item in itemList | filter:{isSelected:false}"
ng-class="{selected: item.isSelected}" ng-click="select(item)">
{{item.desc}}</li>
</ul>
<div ng-hide="!selectedItem">
<hr/>
The selected item is:
<p class="selected">{{selectedItem.desc}}</p>
</div>
the data model including selection state:
$scope.itemList = [
{
"desc": "Item A",
"isSelected": false
},
...
and the controller tracking selection state:
$scope.selectedItem = null;
$scope.select = function(selectedItem) {
// Deselect existing
if ($scope.selectedItem) {
$scope.selectedItem.isSelected = false;
}
// Select new
selectedItem.isSelected = true;
$scope.selectedItem = selectedItem;
};
I'm afraid I do not know anything about the animation part.
I'm having a contacts array holding list of emails. I generate div's using ng-repeat when user clicks i on a particular div i call ng-click="foo($index)"
var contacts=[someMail];
var userSelectedContact[];
$scope.foo=function(row)
{
userSelectedContact.push(contacts[row]);
}
The problem is when I add "|filter" in ng-repeat to search and select a particular contact.
Since filter creates another array after filtering: When ever user selects a contact foo($index) is called, and it is adding some other contact which is not selected by the user.
I can understand it since I am just using $index which is different from the index in original contacts array before filter.
So I have to stop using either filter (or) index to find the user selected contact.
What should i do? Is there any other way?
How can I call a function with user selected data like ng-click="foo(someEmail)"?
you can pass the whole ng-repeat item it the ng-clickfunction
<div ng-repeat="item in items" ng-click="myFunction(item)"></div>
and then in the controller
$scope.myFunction(item) {
console.log(item.name);
//or whatever you want to do with the item
}