I just need to do something simple, but I'm baffled how to go about it.
I have a list of students with a certain number of credits. I want to display one star for every credit completed.
e.g.,
John ★
Sarah ★★
Ken ★
Jared ★★★★
The student's info is contained in JSON that is bound to each student's div, so it can be accessed via {{student.credits}} etc., but something like <template repeat> doesn't seem to be made for something like this. I also thought maybe I could just add a class such as star2 and override the default icon CSS but since each icon uses a SVG, it doesn't want to repeat like a standard image background would.
Any helps or pointers would be greatly appreciated!
You can use the trick I have used in rating-element web component.
Create an array whose length will conveniently be the number of credits:
created: function () {
this._credits = new Array(this.credits);
},
Use this convenient array in the repeat template:
<template repeat="{{_ in _credits}}"></div>
<div>★</div>
</template>
As a reference you can take a look at the complete component in the devel branch, specifically the template repeat and the created callback code fragments.
Im keen on php it would be like
For($i=0; $i <= $score; $i++){
echo "<img src='images/star.jpg' />";
}
Related
I'm new to Angular and I just put in place an i18n (2 languages) system for a website I am creating. Everything works properly but in order to switch from one language to another in my header, I feel stuck.
I followed the Angular documentation to transfer my variables from child to parent component and I ended with this:
<input type="text" id="item-input" #lang>
<button type="button" (click)="changeChosenLang(lang.value)">
{{ 'global.lang' | translate }}
</button>
As you can see, I write my language in the input form and I send it to the proper component with a button. What I wanted was to click on my 'global.lang' text and to be able to send its value to the parent component, since the value is the language which is not actually used.
I don't know how to put my 'global.lang' text in a variable, neither what kind of balise I can use. Also I didn't know how to summarize my problem to search for it on StackOverflow so if you know a similar post, don't hesitate to post the link.
Thank you for your reading!
I found a less tortured way (poor brain) to have the result I wanted:
<span (click)="changeChosenLang()">
{{ 'global.lang' | translate }}
</span>
First I temporary changed my button to a span balise and I deleted the parameter from my changeChosenLang() function. Then, I transferred a variable 'lang' from my parent component to this one, witch contains the value of the language chosen in my app constructor. At each click, I change its value in my changeChosenLang() function and everything works great!
I hope it can help someone someday. The moral of this post is: the simpler, the better! Have a good day.
I have an angular page, where, during an *ngFor loop, I want to update a variable, then write it to the HTML during each iteration of the loop.
Like so:
HTML:
<table *ngFor="let data of Dataset">
somehowRunThis(data)
<div>{{methodResult}}</div>
</table>
TS:
...
methodResult: any;
...
somehowRunThis(data): {
let a;
...
this.methodResult = a;
}
etc etc.
Is there any way this can work? Attempting to add a method that returns within the curly brackets seems to not work, and there appears to be no effective way to run arbitrary methods from the HTML in Angular.
Thank you for any assistance you can provide.
Is there any particular reason why you want to trigger this update in HTML?
Depending on your needs you can use pipe (https://angular.io/guide/pipes) or transform the data to desired format in your component.
I would say it's not a good idea to have a method with side-call effects invoked in HTML.
There are a lot of ways to do this. A general advice: sometimes we are looking for an answer in the wrong places, be open :)
Instead of forcing ngFor, just run a simple array.map on your data before sending it to the template.
displayData = this.data.map(el => this.somehowRunThis(el))
this way you'll avoid having terrible performance.
If you don't care and still want to do this thing for some reason you can make your function return it and actually call in template:
{{ myFunctionReturnsText() }}
This is a bad idea because the function calls will run on each change detection so something like Pipes/Directives will be better.
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>
I have an Angular JS app I am building along with Angular-UI (bootstrap).
I have a set of multiple input boxes, which the user can input into and then that input is binded into a div. What I would like to do is have a character count that applies to all the boxes, so its one limit on all boxes and as the user types into them boxes the overall counter is affected. So far I can do this:
<p>xxxxxxxx?</p>
<textarea class="form-control" rows="3" ng-model="what[$index]" id="input" maxlength="200"></textarea>
<span>{{200 - what[$index].length}} left</span>
So this will give me a limit on that box, but how Can i get it so I have a overall counter? I have about 8 more text boxes and they are binded into a div as follows:
<div ng-repeat="w in what">
<p style="font-size:22px;"></p>
<p>{{w}}</p>
</div>
app.js
$scope.what=[];
Any help would be appreciated?
Two Way Data-Binding
First you need to set up 2 way data-binding so that when a user makes a change to the model it has an effect on the controller. you will use $scope for this since scope represents your model in Angular. then to build a running total I have 2 options for you.
Quick and Dirty
A quick and dirty way to count up a total across different controllers and other parts of your angular app would be to use $rootScope.YourCountVar. Root scope is a global variable and has its own host of problems because of this.
declare a counter near the top of your application (after angular.module) in app.js like this
.run(function ($rootScope) {
$rootScope.counter= 0;
})
Now in your controllers that you would like to count you need to set the value of $rootScope like
$rootScope.counter += $scope.YourInputData.length;
Repeat that for each of your inputs.
Best Practice
Create a Service that you can instantiate everywhere you need to add onto the running total. This way you only have the service where you need it. Doing things this way is much safer and cleaner and I would recommend it.
Tumblr is really impressive in the sense that it allows users to customize their profiles and such. You're allowed to edit the HTML and CSS of your profile.
This is something I want to apply to my own site. However, I'm sure that this will be a big burden on security.
Does anyone have any tips or precautions for a feature like Tumblr's? Also, is it advisable to store the editable HTML and CSS in a database? Thank you :D
P.S.
What about server-side scripting? Lets say I wanted to grant the option of allowing the user to script a button that does something to the database. Any thoughts on how to do this?
This is a very difficult thing to get right, in my experience, if you want users to be able to use absolutely all of HTML/CSS. What you could do, however, is strip all CSS and HTML attributes, and only put "safe" code on a whitelist.
Examples
<p>This is legal code.</p>
<p><a onload="alert('XSS!')">The attribute should be filtered out</a></p>
<p>This is a legal link.
Of course you should still sanitize the href attribute!</p>
<h1>This is bad, because the rest of the page is going to huge,
so make sure there's a closing tag
<style>
.blue {
color: #00f; // keep this (by whitelist)
strange-css-rule: possibly-dangerous; // Filter this out!
}
</style>
Those are just some of the pitfalls you can encounter, though.
I'm not familiar with Tumblr, but I'm pretty sure they're doing something similar to this.
As for the database question, of course you can store HTML and CSS in a database, many systems do this. In your case, you would just need one representation anyway, anything else would just confuse the user ("Why is my CSS rule not applied; it's right there in the code!")
If you are using php then, for database issue you can use mini API system. For example, you want user to allow comment on something and save it in your database, then you can use API like this.
First, api.php file, (URL Location: http://yoursite.com/api.php)
<?php
// ID and Key can be different for all users.
// id = 1234
// key = 'secret_key'
// function = name of the function, user can call
// option = parameter passed to the function
// Now check if id, key, function and option are requested and then
// call function if it exists.
if(isset($_GET['id'], $_GET['key'], $_GET['function'], $_GET['option']) {
$id = $_GET['id'];
$key = $_GET['key'];
if($id == '1234' && $key == 'secret_key') {
// define all functions here
function make_comment($option) {
...code for saving comment to database...
}
if(function_exists($_GET['function'])) {
$_GET['function']($_GET['option']);
}
}
}
?>
Then uesr can call this function from any button using simple call to the API, like
<a href='http://yoursite.com/api.php?id=1234&key=secret_key&function=make_comment&option=i_am_comment'></a>