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
}
Related
I want to display a dropdown value based on selection of type in another dropdown in angular
Basically I have an array of values which I will filer it on the based on type selected which is working fine. below is the code of filtering.
filterMethod(){
if(type === 'P'){
this.filteredArray = this.relationArray.filter(ele=> this.personValue.includes(ele.name));
} else{
this.filteredArray = this.relationArray.filter(ele=> this.orgValue.includes(ele.name));
}
}
And in HTML I'm looping it.
<mat-select formControlName="relation" aria-owns="relationshipSelect">
<mat-option *ngFor="let rel of filteredArray" [value]="relation.name">
{{rel.value}}
............
This above HTML is basically a child component where user can multiple dropdown when clicked new button. i.e., another dropdown will come next to it and so on...
Here what is happening is after selecting the relation dropdown when user click new button another relation dropdown is coming but the existing relation dropdown value is vanished. If user fires the filterMethod() method the vanished value will come.
I suspect it is because of calling new button new instance will be created and array will be set to its original state.
As a simple test I'm passing 2 lists to a javascript function, only the list without a multiple attribute populates, the second list does get the "select one or more items" option but not 1,2,3 and only after I lose focus from list2. Can anyone tell me how I can repopulate the multiselect?
<select id="lstTest"></select>
<select id="lstTest2" multiple="multiple"></select>
function TestList(obj) {
var x = $(obj);
x.append('<option value="">Select one or more items</option>');
x.append('<option value="1">1</option>');
x.append('<option value="2">2</option>');
x.append('<option value="3">3</option>');
}
Empty Lists
List 1 after javascript call
List 2 after javascript call
Turns out the select is referencing custom js to turn it into a checkbox list as a way of selecting the items instead of highlighting. I need to treat it as a checkbox list and not just a list of options, which I'm still not sure how to do, I need to clear and add new checkboxes.
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);
});
}
could you please tell me how to hide list when user select item from list .Actually when user type anything on text field it show a list , when user select any row from the list it set value on text field .But that time I need to hide my list .So I take one boolean variable $scope.islisthide=false; using that value I need to hide or show list .Please press "a" than select value from list .I already use ng-show but how to add condition in that .
<div class="listcontainer" ng-show="SEARCH.stationCode" >
<li ng-click="rowclick(station)" class="item" ng-repeat="station in data.data | filter:SEARCH.stationCode :startsWith">{{station.stationName+"-("+station.stationCode+")"}}</li>
</div>
$scope.rowclick = function(station) {
$scope.SEARCH.stationCode=station.stationCode;
// $scope.$apply();
}
here is my code
http://codepen.io/anon/pen/zGYPWj
Just use a flag to indicate whether a selection has been made. Here's an example:
http://codepen.io/anon/pen/RPwjvN
I am using a flag called selected
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)
};