I must create a web app with angularjs.
I must create a web app where I have the possibility to create groups of athlete. I must store them in localstorage. The elements of the athletes which I must store are the id. How can I do this?
Someone can help me?
I have this code in controller:
$scope.selection=[];
// toggle selection for a given employee by name
$scope.toggleSelection = function toggleSelection(id_athlete) {
var idx = $scope.selection.indexOf(id_athlete);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(id_athlete);
}
window.localStorage['$scope.selection'] = JSON.stringify($scope.selection);
$scope.selection = JSON.parse(window.localStorage['$scope.selection'] || '{}');
the problem of this part is that in this way I don't see the id but I only see the name but it's not important.
The html code is :
<input ng-hide="see" id="group.name" type="checkbox" ng-checked="selection.indexOf(group.id) >" ng-click="toggleSelection(group.id)" />
<!-- -->
<button ng-hide="see" ng-click="save(group.id)" >Salva</button>
Ok now how can I create the group?
Please help me
Related
I'm rendering a map of items retrieved from a database and filtered via the value state of an input field and attempting to then set the state of the input field as the value stored in some list item on click. I figured that using document.getElementById().innerHTML would allow me to retrieve the content stored within the appropriate tag and then set it to state which does work, the issue I'm facing is that it will only retrieve the innerHTML of the first item rendered in the map.
I've tried solutions ranging from applying UUID to making the mapped content available to the window and transfering the state of the individual objects but each disparate solution only moves the value of the first item to state - any ideas?
Rendered Content:
window.filteredItems = this.state.items.filter(
(item) => {
return item.companyNameObj.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
}
);
<div className="fixed-width">
<div className="search-container">
<form>
<input type="text" name="search" className="search-bar" placeholder="Search: " onChange={this.handleChange} value={this.state.search} />
</form>
<ul className="search-results">
{window.filteredItems.map((item) => {
return (
<div className="distinct-result-container">
<li key={item.id}>
<div className="image-container">
<img src={item.imageObj} alt={item.companyNameObj + " logo."}/>
</div>
<div className="company-container">
<span onClick={this.stateTransfer}><h3 id={"ID"}>{item.companyNameObj}</h3></span>
<p>Owned by: {item.ownerNameObj}</p>
</div>
</li>
</div>
)
})}
</ul>
</div>
<Footer />
</div>
);
stateTransfer()
stateTransfer(id) {
var search = this.state.search;
var uniqueID = document.getElementById("ID").innerHTML;
this.setState({
search: uniqueID
});
}
The current content of stateTransfer() doesn't represent any significant attempts at approaching a solution to this issue, it's just the minimum required implementation to move the innerHTML content to the input fields value.
EDIT: I've further clarified on the task at hand and a potential solution in the comments below (which follow this), I'm just hoping someone is able to help me with the actual implementation.
#DILEEPTHOMAS The list is comprised of data pulled from a Firebase Realtime Database and is rendered via mapping the filteredList and a search query; that functoionality works fine - what I need is to be able to click the element of any distinct li and have the innerHTML (the text stored in that li's item.companyNameObj) be moved to the value of the input field (so users can navigate the search content with re-typing).
#JoshuaLink I can't necessarily configure the items of the list any
further as it's just data pulled from an external database - I believe
the appropriate solution is to somehow provide a unique HTML ID value
to each newly rendered li and have that selected ID moved to
stateTransfer() where it can be set as the input fields value, I'm
just struggling with the actual implementation of this.
EDIT 2: I've managed to figure out a solution to both parts of the problem as described above - I'll post it as an answer below.
I managed to solve both parts of my problem:
The key issue, which was moving the text stored in each distinct li to the input value, which was apparently easily solved by making my stateTransfer() function accept an event and passing the .innerText value of the h3 through the event (I assumed I would have to use .innerHTML, which would require me to provide each distinct li with a unique generated ID) as follows:
stateTransfer(e) {
var search = this.state.search;
var innerText = e.target.innerText
this.setState({
search: innerText
})
}
The secondary issue, (which I incorrectly assumed was integral to implementing a solution to my question), assigning unique HTML id values to my procedurally generated li's was solved by implementing a for-loop in a componentDidUpdate() function which iterates through the current total length of the list and and assigns an id with the loop iterator concatenated to the end of the string as follows:
componentDidUpdate() {
var i;
var searchCompanyNames = document.querySelectorAll('.comapnyNames');
for(i = 0; i < searchCompanyNames.length; i++) {
searchCompanyNames[i].id = 'companyName-' + i;
}
}
Whilst I didn't need to assign unique ID's to the li's in the correct implementation, it's a useful trick worth noting nonetheless.
I'm using the GAS code bellow to add a new contact into Google Contacts (https://contacts.google.com/):
var contact = ContactsApp.createContact('Bbbb', 'Cccc', 'mymail#mails.com').addUrl(ContactsApp.Field.WORK_WEBSITE, 'https://sites.google.com/site/...');
The code works perfectly but for a single detail: it adds the new contact to a hidden list and not to the main or visible «Contacts» list.
I know it works because when I use the lookup box to search for the newly created contact it's there, in the «Other contacts» list. I need it to be created in the main «Contacts» list from the beginning, otherwise I would have to do it manually using the «Add to contacts» icon with every contact created (I'm planning to add some thousands of contacts.)
Thanks.
For me, I have to add them to the ContactGroup named System Group: My Contacts.
function finishAddingContact(contact) {
var mainGroup = ContactsApp.getContactGroup("System Group: My Contacts");
if(mainGroup)
mainGroup.addContact(contact);
}
Note that getContactGroup(string) is an exact name match.
I recommend inspecting your ContactGroups for system groups, and then selecting the appropriate one from that list. It's probably the one with the most contacts in it:
function inspect() {
var groups = ContactsApp.getContactGroups();
for(var g = 0; g < groups.length; ++g) {
if(groups[g].isSystemGroup()) {
Logger.log(groups[g].getName() + ": " + groups[g].getContacts().length + " members, id=" + groups[g].getId());
}
}
}
Thanks a lot tehhwch.
I used your second code to get the right group ("System Group: My Contacts"), and then:
var contact = ContactsApp.createContact('Wunder', 'Bar', 'excellent#help.com');
var group = ContactsApp.getContactGroup("System Group: My Contacts");
group.addContact(contact);
It works, and the contact is immediately visible in my Android device.
Example here : http://webintegrator.edu.ats.dk/kean0012/smartgym/
(scroll to bottom and you'll see the three prices i'm talking about)
Is it possible to define which price checkbox is checked when clicking on the corresponding price on the frontpage?
So that if i'm clicking on 209,- price on the bottom of the frontpage - that it will check the corresponding checkbox on the "tilmeld" page when redirected.
thanks.
This is a fully functional code that will let you achieve what you require. I hope, this helps. :)
Here's a working demo:
https://plnkr.co/edit/3cHgLoBerPBH9Bj6RH7Y?p=preview
Main.html
Change your hyperlinks to the form of by appending ?money=value:
209
101
300
Next.html
Suppose your radio buttons are of the form:
<form action="">
<input type="radio" value="209" id="c209"> 209<br>
<input type="radio" value="101" id="c101"> 101<br>
<input type="radio" value="300" id="c300"> 300
</form>
Add this script to the end of your body tag:
<script>
var value;
var url1;
function parseURLParams(url) {
var queryStart = url.indexOf("?") + 1,
queryEnd = url.indexOf("#") + 1 || url.length + 1,
query = url.slice(queryStart, queryEnd - 1),
pairs = query.replace(/\+/g, " ").split("&"),
parms = {}, i, n, v, nv;
if (query === url || query === "") return;
for (i = 0; i < pairs.length; i++) {
nv = pairs[i].split("=", 2);
n = decodeURIComponent(nv[0]);
v = decodeURIComponent(nv[1]);
if (!parms.hasOwnProperty(n)) parms[n] = [];
parms[n].push(nv.length === 2 ? v : null);
}
return parms;
}
url1 = parseURLParams(window.location.href);
for(key in url1) {
if(url1.hasOwnProperty(key)) {
value = url1[key];
}
}
document.getElementById("c"+value).checked= true;
</script>
How this works?
In the main.html you are passing the values to the URL by appending
the values in the url itself as ?money=209 when 209 is the value
that will be validated and the appropriate radio button will be
selected.
In the next.html we have a URLparser which will extract the values
followed by ?money="value" and store it in the variable "Value".
According to this variable, we have a form with radio buttons of IDS
c209,c300,c101 and so on. We'll just use a simple expression:
document.getElementById("c"+value).checked= true;
This appends "c"with the value obtained. This makes it as c209 and the
appropriate radio button is selected.
Define a variable on window localStorage like:
window.localStorage.setItem('tmp', 'something');
This must work for you.
Ok so i have a Chatroom, People are required to type in a name and once done they may chat. But alot of times people take other peoples name. So what i need is kind of like a limited input
here is the input:
<input type="text" class="input-block-level" ng-model="name" ng-change="setName()" placeholder="Your Name" maxlength="10" required></div>
I need this so if i type in the name Bob, no one can use that name again
Incase you want the website: https://project-js-imthatguy.c9users.io/
One possible way to check amongst a given set...
used a simple for loop for this example
Inside your send function that you have defined, perform a check:
$scope.send = function send() {
var isDuplicated = 0
for (i = 0; i < $scope.roster.length; i++){
if ($scope.roster[i] == $scope.name){ isDuplicated++ }
}
if (isDuplicated > 1){
//make an error message appear here
//quick and dirty solution
alert('Please choose a name that has not been taken by someone else')
//suggestion set a variable here to true and then use that variable to show/hide a div below the user input area
}
else {
console.log('Sending message:', $scope.text);
socket.emit('message', $scope.text);
$scope.text = '';
}
};
I'm trying to create a flash application that will keep track of user generated values. The app should basically allow the user to input the name of the item and it's cost. The total costs should then be added up to show a total value to the user. I can probably figure out how to add the values together, but I'm not really sure how to allow the user to create a list and then allow the user to save it. Can anyone point me towards a tutorial or point me in the right direction?
I am using variables to add user inputed numbers to come up with a total. The first problem is that actionscript 3.0 does not allow variables for texts. I just converted it to 2.0 to fix this. The second problem, is when I test the app and put in my values and click submit, I get NaN in the total values field. Is there a reason why it wouldn't add the values?
Here is the code I used for the submit button:
on (release) {
total = Number(rent) + Number(food) + Number(travel) + Number(entertainment) + Number(bills);
}
Am I missing anything?
Can I give the input text instance names and then give them variables? How are some ways to go about this?
Thanks for the help!
Have an object array, say for example
var stack:Array = new Array();
Then push the item name and it's cost to that array when user inputs, like
stack.push({item:AAA, cost:xx});
So that you can generate the list whenever you want with that array.
You have to see how this works in code. A list in actionscript could be stored inside an array, vector, dictionary or even an Object.
Var myList:Array = [];
myList.push({name: "item 1", cost: 5 });
myList.push({name: "item 2", cost: 7.5 });
If you want to grab the 'product' of "item 1" from the list, you have to create a function for that, lets call it getProductByName
function getProductByName(name:String):Object
{
for each(var product:Object in myList)
{
if (product.name === name) return product;
}
return null; // no match found
}
You can call that function like this:
var product = getProductByName("item 1");
trace(product.cost); // 5
And you can alter the product, so lets make it more expensive
product.cost += 1;
trace(product.cost); // 6
Have fun! If you are using classes, you would create one for the product, with public name and cost, and in that case you'de better use a vector, to ensure working with the right type.
This is what fixed the issue for me in action script 3.0:
myButton.addEventListener(MouseEvent.CLICK, addThem);
function addThem(e:MouseEvent)
{
totalField.text = String ( Number(field1.text) + Number(field2.text) + ....);
}
I also had to name the instances appropriately.