I'm trying to call a function through a dynamic string in html like this
(this.salva(i)): for (let i = 1; i < 41; i++) {
for (let y = 0; y < budini.length; y++) {
contains = this.diseases["M_" + i].g.includes(budini[y])
if (contains) {
output.innerHTML += `
<ion-card class=>
<ion-card-header>
<b>${this.diseases["M_" + i].m} </b>
</ion-card-header>
<ion-card-content>
<div class="fav">
<input type="checkbox" id="heart${i}" (click)=${this.salva(i)}>
<label for="heart${i}"></label><br><br>
Generi:
</div>
</ion-card-content>
</ion-card>
`;
break;
}
}
}
The problem is that the following function in the is not called:
salva(elementoCliccato: number) {
console.log("elementoCliccato")
console.log(elementoCliccato)
let cliccato = <HTMLInputElement>document.getElementById("heart" + elementoCliccato);
console.log(cliccato.checked)
if (cliccato.checked == true) {
var elementoSalvato;
elementoSalvato = this.diseases["M_" + elementoCliccato];
console.log(elementoSalvato)
}
}
So there is a way to call a function from a dynamic html string IONIC?
Related
<div id="options-container"></div>
<script>
function createInputElements(num) {
const optionsContainer = document.getElementById("options-container");
for (let i = 0; i < num; i++) {
const input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("placeholder", `Input ${i + 1}`);
optionsContainer.appendChild(input);
}
}
const option = 3;
createInputElements(option);
</script>
This is javascript code to create multiple input fields dynamically based on option numbers and wanted to write in react js
You use the useState to do so:
const[option,setOption]=useState(3);
let output=[];
for (let i=0;i<option;i++){
output.push(<input key={"input_"+i} type="text" placeholder={"Input "+(i + 1)}/>)
}
return (
<div id="options-container">
{output}
</div>
);
I would like to know if there is a simple way of parsing different array to a single *ngfor table. I have the below codes:
.html
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="date" (click)="valid()" />
<label class="form-check-label">Valid</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="date" (click)="invalid()"/>
<label class="form-check-label">Invalid</label>
</div>
</div>
<tr *ngFor="let myAccount of Account | filterBy: accountFilter | paginate: { itemsPerPage: count, currentPage: p }; let i = index">
<td>{{ (p - 1) * count + i + 1 }}</td>
<td>{{myAccount.name}}</td>
<td>{{myAccount.startDate}}</td>
<td>{{myAccount.endDate}}</td>
</tr>
.ts
Account = [];
radioAccount = [];
currentDate = '';
ngOnInit() {
showAll();
}
showAll() {
return this.acctService.getAccount().subscribe(data => this.Account = data);
}
valid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.radioAccount = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate > this.currentDate});
}
invalid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.radioAccount = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate <= this.currentDate});
}
You can see that I have two arrays, how do I display content of "radioAccount" array when a radio button is clicked? That is, the possibility of swiching between "Account" content and "radioAccount" content. I don't think repeating the *ngfor code with *ngif is a solution.
You can create an array which will not be filtered, e.g., AccountSource and then you can assign original values (AccountSource) to Account:
Account = [];
AccountSource= [];
showAll() {
return this.acctService.getAccount()
.subscribe(data => {
this.Account = data;
this.AccountSource = data;
});
}
valid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.Account = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate > this.currentDate});
}
invalid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.Account = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate <= this.currentDate});
}
setSourceData() {
this.Account = this.AccountSource;
}
and call setSourceData() method whenever you want to see original values.
I cannot get the object's property to be read in ng-style(shape.radius || shape.length). I can't even get 1 to work at the moment, but would like to have an or statement included. Similar to my ng-class.
There is a button to generate shapes, and the shapes were created with a random size. Here is my code:
html:
<div ng-controller='ShapeController as sc'>
<div>
<p><input type="submit" value="Generate Random Shapes" ng-click="sc.generateShapes()"/></p>
<div ng-repeat="shape in sc.shapes">
<div class="shape" ng-class="{circle: shape.radius, square: shape.length}" ng-style="{'width': shape.length}"></div>
</div>
</div>
</div>
script:
var app = angular.module('app', []);
app.controller('ShapeController', function(){
var vm = this;
vm.shapes = [];
vm.randomShapes = [];
vm.width = 30;
function createCircle(radius) {
let circle = new Circle(radius);
vm.shapes.push(circle);
} // end createCircle
function createSquare(length) {
let square = new Square(length);
vm.shapes.push(square);
} // end createSquare
vm.generateShapes = function() {
let times = 50
for (let i = 0; i < times; i++) {
createCircle(getRandomNumber());
}
for (let i = 0; i < times; i++) {
createSquare(getRandomNumber());
}
sort(vm.shapes);
console.log(vm.shapes);
}; // end generateShapes
}); // end controller
function sort(arr) {
arr.sort(function(a,b){
return b.getArea() - a.getArea();
});
} // end sort function
function getRandomNumber() {
return Math.random() * (100-1) + 1;
}
width should be either in px(some unit like em, pt, etc) or %
ng-style="{'width': shape.length + 'px'}"
There are some categories inside ng-repeat, and each one includes some accounts, If each category is selected then all accounts inside it must be selected and vice versa. Also, if one account is not selected, then the parent category is not selected.
How can I do that?
Here is how the view is:
And the code fiddle:
http://jsfiddle.net/2f6qscrp/208/
Thank you for any help.
Here is the working fiddle for your case,
http://jsfiddle.net/balasuar/2f6qscrp/209/
HTML
<div ng-app='home'>
<!-- App goes here -->
<md-content layout-padding ng-controller="MainCtrl as mainCtrl">
<md-checkbox ng-model="selectedAll"
ng-change="toggleAll()"
class="md-primary">
<span ng-if="selectedAll">Un-</span>Select All
</md-checkbox>
<div ng-repeat="category in naturalAccounts">
<md-checkbox class="md-primary" ng-model="category.selected" ng-change="toggleCategory(category)">
{{ category.name }}
</md-checkbox>
<div ng-repeat="acc in category.accounts">
<md-checkbox class="md-primary" ng-model="acc.selected" ng-change="toggleAccount(category, acc)" >{{acc.name}}</md-checkbox>
</div>
</div>
</md-content>
</div>
JS
angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);
angular.module('home').config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('grey');
});
angular.module('home').controller('MainCtrl', function ($scope) {
$scope.naturalAccounts = [
{"id":0,"name":"category0","accounts":[{"id":0,"name":"acc0"},{"id":1,"name":"acc1"},{"id":2,"name":"acc2"}] },
{"id":1,"name":"category1","accounts":[{"id":0,"name":"acc0"},{"id":1,"name":"acc1"},{"id":2,"name":"acc2"}] },
{"id":2,"name":"category2","accounts":[{"id":0,"name":"acc0"},{"id":1,"name":"acc1"},{"id":2,"name":"acc2"}] }
];
$scope.selectedAll = false;
function setSelectedAll() {
for(var i = 0; i < $scope.naturalAccounts.length; i++) {
var category = $scope.naturalAccounts[i];
$scope.selectedAll = category.selected;
if(!$scope.selectedAll) {
break;
}
}
}
$scope.toggleAll = function() {
for(var i = 0; i < $scope.naturalAccounts.length; i++) {
var category = $scope.naturalAccounts[i];
category.selected = $scope.selectedAll;
for(var j = 0; j < category.accounts.length; j++) {
var account = category.accounts[j];
account.selected = $scope.selectedAll;
}
}
};
$scope.toggleCategory = function(category) {
for(var j = 0; j < category.accounts.length; j++) {
var account = category.accounts[j];
account.selected = category.selected;
}
setSelectedAll();
};
$scope.toggleAccount = function(category, account) {
for(var j = 0; j < category.accounts.length; j++) {
var account = category.accounts[j];
category.selected = account.selected;
if(!category.selected) {
break;
}
}
setSelectedAll();
};
});
<input type="checkbox" ng-model="category.checked" ng-change="checkAllAccountsOfCategoryIfChecked(category)" />
and
<input type="checkbox" ng-model="account.checked" ng-change="checkOrUncheckCategoryBasedOnItsAccounts(category)" />
In your controller:
$scope.checkAllAccountsOfCategoryIfChecked = function(category) {
// TODO if category is checked, then loop over all its accounts and check them
}
$scope.checkOrUncheckParentCategory = function(category) {
// TODO if all the category's accounts are checked,
// then check the category, otherwise uncheck it
}
I'm trying to create a tree structure in the select element. I make indention by filter. As a result this indentation trims after output. Is that possible to disable trimming?
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories">{{category | intent}}</option>
</select>
app.filter('intent', function() {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0; i < category.intent * INTENT_SIZE; i++) {
result += " ";
}
result += category.name;
return result;
};
})
For angular 2+ I use this pipe to 'untrim' template spaces :
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'untrim'
})
export class UntrimPipe implements PipeTransform {
transform(value: any, args?: any): any {
return typeof value === 'string' ? value.replace(/\s/g, ' ') : value;
}
}
Related:
Add space to <select> with ng-options
var app = angular.module('app', []);
app.filter('intent', function() {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0, len = category.intent * INTENT_SIZE; i < len; i++) {
result += String.fromCharCode(160);
}
result += category.name;
return result;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div ng-init="categories = [{id: 0, name:'bob', intent: 0},
{id: 1, name:'chris', intent: 1},
{id: 2, name:'mike', intent: 2}]"></div>
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories">
{{ category | intent }}
</option>
</select>
</div>
You need to use the HTML character to render a space that will not be ignored by the browser.
But then you need to make sure that Angular "trusts" the HTML you are trying to use.
You can accomplish that by changing your markup to:
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories" ng-bind-html="category | intent"></option>
</select>
Then change your filter code to:
app.filter('intent', function($sce) {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0; i < category.intent * INTENT_SIZE; i++) {
result += " ";
}
result += category.name;
return $sce.trustAsHtml(result);
};
});
Working Plunkr
NB: I only tested this in Chrome version 41. I'm not sure if all browsers allow having s in the option text.
To get space characters in your options use ng-bind-html to render the space.
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories" ng-bind-html="category | intent"></option>
</select>
In your Filter:
app.filter('intent', function($sce) {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0; i < category.intent * INTENT_SIZE; i++) {
result += " ";
}
result += category.name;
return $sce.trustAsHtml(result);
};
});
DEMO