How can i take the value of the data-set attribute or change it in the link with the following structure:
<a href='#' data-set='22'>Text</a>
I know that in jquery I can use the:
$('a').attr ('data-set');
And to change your content:
$('a').attr ('data-set', '01');
But in Ionic4 i am not getting it, already researched and can not exactly that.
Can anyone help me?
In native JavaScript you can just do
To get the attribute use document.querySelector('a').getAttribute('data-set');
And to set the attribute use document.querySelector('a').setAttribute('data-set', '01');
You can use HTMLElement.dataset
assuming you have <a href='#' id="mylink" data-set='22'>Text</a>
let elem = document.querySelector('#mylink');
//get
el.dataset.set
//set
el.dataset.set = "01"
Note: HTMLElement.dataset may not be supported in some browsers, please test it before put it into production
SOLVED:
I did it this way:
<ion-input #myInput data-set="01"></ion-input>
#ViewChild ('myInput', { read: ElementRef }) myInput: ElementRef;
ngAfterContentInit() {
console.log(this.myInput.nativeElement.dataset.dta1);
}
in HTML file,
<ul>
<li #messageEl *ngFor="let message of messages" [attr.data-message-id]="message.id">
{{ message.text }}
<br><button (click)="logMessageId(messageEl)">Console Log </button>
</li>
</ul>
in .ts file,
logMessageId(el){
let messageId = el.getAttribute('data-message-id');
//let messageId = el.dataset.messageId;
console.log("Message Id: ", messageId);
}
Related
I am building a filter for finding city`s.
I have an array with citynames. (this.place = [Londen, Amsterdam, Rome, Paris])
I have an inputfield when a user types a letter in the inputfield I want to search through the array and give him a list of suggestions.
I tried this but it does not work:
Html:
<input #inputValue (keyup)="filterValues($event)" />
<div *ngIf='placesFound'>
<span *ngFor="let place of placesFound">
{{place}}
</span>
</div>
TS file:
filterValues(event) {
let key = event.key
this.placesFound = this.places.filter(function(event) {
return this.places.indexOf(key) > -1
})
}
this does not work does someone has any suggestions?
thx!
I am fiddling around with Gatsby JS using WP as the backend and so far so good. Now I was trying to pull in the menu which for main menu items works just as expected. What I can't really wrap my head around is how to get the submenus pulled in.
The only related thing I found was https://github.com/gatsbyjs/gatsby/issues/2426 which does give me the submenus if I log the data. Just can't get them to be pulled into the menu.
Here is my query in layouts/index.js:
export const query = graphql`
query LayoutQuery {
allWordpressWpApiMenusMenusItems {
edges {
node {
name
count
items {
order
title
url
wordpress_children {
wordpress_id
title
url
}
}
}
}
}
}
`
This is my menu component:
class MainMenu extends Component {
render(){
const data = this.props.menu.allWordpressWpApiMenusMenusItems.edges["0"].node.items
console.log(data)
return(
<div>
<h1>Menu</h1>
<ul>
{data.map((item) =>
<li key={item.object_slug}>
<Link to={item.url}>
{item.title}
</Link>
</li>
)}
</ul>
</div>
)
}
}
export default MainMenu
I tried fiddling around with variations of
{item.children["0"].wordpress_children.title}
but just can't get it to work:/ Any ideas or pointers would be much appreciated!
I just tested this, and your logic is sound all you need is another loop to display subitems. So in your MainMenu.js you can do something like this:
class MainMenu extends Component {
render() {
const data = this.props.menu.allWordpressWpApiMenusMenusItems.edges[0].node.items
console.log(data)
return (
<div>
<h1>Main Menu</h1>
<ul>
{data.map((item) =>
<li key={item.object_slug}>
<Link to={item.url}>
{item.title}
</Link>
<ul>
{item.wordpress_children && item.wordpress_children.map((subitem) =>
<li key={item.wordpress_id}>
<Link to={subitem.url}>
{subitem.title}
</Link>
</li>
)}
</ul>
</li>
)}
</ul>
</div>
)
}
}
This line is very important {item.wordpress_children && item.wordpress_children.map((subitem)
This will check if your menu item has subitems, and if it does it will map them and iterate through them.
I hope this works for you, I tested it and it works.
I have just started using AngularJS, I would like to know this approach to scroll the page to the first input with an error when I submit a form.
Here is the way with jQuery :
$('html, body').animate({
scrollTop: $("--- #ID OF THE FIRST INPUT WITH ERROR ---").offset().top
}, 2000);
How to do this in Angular ?
HTML
<form class="form" novalidate>
<input type="text" class="nom-du-projet" ng-model="fields.nom" required />
<p ng-show="fields.nom.$invalid && !fields.nom.$pristine">The name is required.</p>
<input type="text" ng-model="fields.cible" />
...
<button type="submit" ng-click="submit(fields)">Add</button>
</form>
JS
$scope.submit = function(fields){
console.log(fields);
$http
.post('/xxxx', fields)
.success(function(response) {
// success
})
.error(function(response) {
// scroll to field error
});
}
You could use the $anchorScroll service.
$location.hash("<errorFieldID>");
$anchorScroll();
Or you could just use:
$window.scrollTo //you could even get bold and user window.scrollTo
There are a couple plugins out there that say they can do it.. but I unfortunately have not vetted them so I can't recommend any.
You could try something like this:
//scroll to an anchor by ID
$scope.scrollToAnchor = function (anchor) {
if (anchor !== null) {
$location.hash(anchor);
$anchorScroll(anchor);
}
}
//use above function
$scope.scrollToAnchor($scope.myForm.$error.required[0].$name);
//or any ID
$scope.scrollToAnchor('ID');
I have a written a angularJS directive for the same purpose, you can include the directive as bower component and use this functionality without having to write any extra code for any form in your application. Please do let me know, if any improvements or corrections/enhancements are needed for the directive.
https://github.com/udayvarala/ng-scroll-to-error
Thanks,
I am trying to set a required field based on a condition. Here is my code.
<div id= 'outer-form' ng-form='main' validate-on-submit='#page-errors' on-invalid='DisplayErrors();' on-valid="SubmitPage();'>
...other div's
<div ng-repeat='myItem in aFunction.myItemArray' ng-form='sub'>
<div ng-show= 'myType == "Shoes"'>
#Html.TextBox('Shoes', null, new { ng_model = 'Shoes', ng_required = 'myType == "Shoes"' })
<span ng-show="sub.Shoes.$error.Text">Shoes required</span>
</div>
<div ng-show= 'myType == "Socks"'>
#Html.TextBox('Socks', null, new { ng_model = 'Socks', ng_required = 'myType == "Socks"' })
<span ng-show="sub.Socks.$error.Text">Socks required</span>
</div>
<button class="clientContinue" id="step-submit-btn">CONTINUE</button>
</div>
I found this which does not work for me. I am stuck so any help/suggestions will be appreciated. Thanks!!
I don't know what kind of template engine are you using on your exemplo, but if it supports adding attributes depending on a boolean your code looks right.
Speaking about Angular, looks like you'll need a custom validator (type validator) where you can pass the type as a HTML attribute. Inside the validator you'll be able to control the required flag very easily.
You can found more information about custom validators in the following link: http://docs.angularjs.org/guide/forms
I am a Java developer who recently started to learn about the Play Framework. I have been trying to get the below template working but cant seem to get it. I have got the following in my Scala template
#navItem(label: String, link1: String) = {
#{if (Application.isAuthenticated()) {
<li class="active">
label
</li>
}
else {
<li class="disabled">
{label}
</li>
}
}
}
I am calling this later in my template like so
<ul class="nav">
#navItem("Search Documents", "/search")
</ul>
The generated link has href as localhost:9000/#link1 instead of localhost:9000/search. I am not sure whats going on.
PS: If I change my template as below it works fine. But I want to understand why the above template wont work.
#navItem(label: String, link1: String) = {
<li class="#(if (Application.isAuthenticated()) "active" else "disabled")">
#label
</li>
}
Not quite sure about this, but my guess would be the following: The #{ ... } indicates the beginning of a dynamic statement and all of its content is treated as Scala code. Thus, it is a normal if-condition with two strings as a result, both of which are simply returned in the template.
Why are you marking it as a multi-line code block anyway? Have you tried it like this? (note the missing curly braces after the 2nd # sign):
#navItem(label: String, link1: String) = {
#if(Application.isAuthenticated()) {
<li class="active">
#label
</li>
} else {
<li class="disabled">
#label
</li>
}
}