I am using ion-range with pin and steps. I get the current value in the range pin, but I want to add/append some text next to it.
So far in ionic API and docs I did not find a way to modify the content from the range pin, so I am thinking on maybe appending a span via the code, but so far I know to use .append() function from jQuery.
The html of the range pin is:
<div class="range-pin" role="presentation">1</div>
So I want to show it like:
<div class="range-pin" role="presentation">1 item</div>
I know it is a bit late but if anyone comes across this question, I have found the following solution:
HTML
<ion-range id="euroRange" debounce="250" pin="true" min="0" max="50" (ionChange)="formDidUpdate()" [(ngModel)]="price" color="secondary"></ion-range>
See how I added an id called euroRange to my ion-range element.
CSS
#euroRange {
.range-pin:after {
content: " €";
}
}
Inside of the euroRage id I added .range-pin:after which means that whatever I specify should be done directly after the normal content of the pin.
With content I added a space and the € symbol.
Here is the
result.
This was my solution.
Note: I put this inside ionViewDidEnter.
this._elementRef.nativeElement
.querySelector('.range-knob-handle')
.addEventListener('pointermove', function () {
const value = this.getAttribute('aria-valuenow');
this.querySelector('.range-pin').textContent = `${value} hours`;
});
So the main thing here is that the const value is the value selected on the range. After that you can do whatever you want with it and just set the textContent of the range-pin to fix the text.
Related
So my current situation is that I am trying to click on a marker based in a Google Maps window on a webpage. I have successfully located the markers in two manners: element.all(by.css('.angular-google-map-marker')) and element.all(by.repeater('m in map.markers')).
I have proven that I am obtaining the correct elements by changing the location on the Google Map and using count() to retrieve the number of markers present which returns the correct number in every case.
However, when I try to do for example element.all(by.css('.angular-google-map-marker')).first().click(), I receive the following error:
Failed: element not visible
HTML section
<div ng-transclude="" style="display: none">
<span class="angular-google-map-marker" ng-transclude="" ng-repeat="m in map.markers" options="m.options" coords="m.coords" idkey="m.id" click="onMarkerClick"></span>
<span class="angular-google-maps-window" ng-transclude="" coords="activeMarker.coords" options="windowMapOptions" show="windowMapOptions.show" closeclick="closeInfoWindow" templateurl="'gMapInfoWindow.html'" templateparameter="activeMarker"></span>
</div>
Normally elements that trigger some event due to clicking have an attribute like ng-click= foo(), however the markers above only use click= foo(). In addition if you look the line with the div tag, it says display: none, which might explain the visibility error.
My Question: Is there a way to activate the effect of an attribute like click= foo() without clicking on the element directly?
Aside from trying to make an element visible and then clicking, you can attempt clicking "via JavaScript" (there are some differences though - WebDriver click() vs JavaScript click()):
var marker = $('.angular-google-map-marker');
browser.executeScript("arguments[0].click();", marker.getWebElement());
First of all be sure that you can interact with the element when it is visible, you can do this from within the DevTools of your browser, make it visible by adding a display:block. Then check that if you change the value of the selectbox, the value can also be used with Angular Binding.
If so, you can easily make the element visible with Protractor by injecting a piece of Javascript in the page with the following command:
browser.executeScript('document.querySelector("div").style.display = "block"');
This results in a promise, so be aware of that!
I'm very new at orchard and I'm having troubles finding a solution for what I think is a basic problem.
I want to render my own custom shape 'Content-Button' for my custom content type 'Button'. This works wonderful!
The Button content is made out of:
Display name
Content picker
My custom shape looks like this:
#using Orchard.Utility.Extensions;
#{
if (Model.Title != null) {
Layout.Title = Model.Title;
}
Model.Classes.Add("content-item");
var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
Model.Classes.Add(contentTypeClassName);
var tag = Tag(Model, "div");
tag.AddCssClass("row");
}
#tag.StartElement
<div id="" class="col-md-8 col-sm-10 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-2 btn btn-secondary center-block">
#Display(Model.Content)
</div>
#tag.EndElement
What I'm however trying to do is instead of calling '#Display(Model.Content)' I would like to call a specific shape to be rendered there. Like #Display(Model.Content.DisplayName).
I would like to do the same for the content picker so i can make a link in the div (through ID)
I've also tried to exlude certain (extra) fields using my theme's placement.info) but it seems I'm doing something wrong there as well.
<Match ContentType="Button">
<Place Parts_Contents_Publish="-"></Place>
<Place Fields_Common_Text="-"/>
</Match>
Note: The 'Fields_Common_Text' was purely a test but it stills renders that shape on my button.
If somebody could point me in the right direction, explain it or send me some very good documentation to read through I would be a very happy man.
You can access fields directly as following:
#Model.ContentItem.ButtonPart.DisplayName.Value
and same thing for content picker field, then you don't need to use placement.info file any more.
I have multiple form fields in an angular view that count down characters as the user types. However, I have a button/link that should reset all the form fields and character counts. When clicked, the form is reset but the character counts are not updated to reflect the change. I know there has to be a model connection I am missing here (I'm an angular newbie). I also know it's probably best to rest the form using $setPristine();, but I am unable to get that to work.
Here's what I've got: http://embed.plnkr.co/5SGjqPhYYIZF1qp0QAAT/preview
I'd appreciate any help I can get! Thanks!
The problem is that your reset button isn't updating the Angular model values your character count calculations rely upon.
Instead of using reset on the form element, just clear the model values:
HTML:
<a href ng-click="clearForm()">RESET</a>
Controller:
$scope.clearForm = function() {
$scope.TA3 = '';
$scope.TA4 = '';
}
Revised Plunker
I am trying to select a div based on its height, as shown in this tutorial,
jQuery Selection. I cannot get it to work: jsbin example . The line not working is:
$('div[height=50px]').css('background-color', 'orange');
That's an attribute equals selector, so the HTML it would match is:
<div height="50px"></div>
You could change it to:
$('div[style="height:50px"]').css('background-color', 'orange');
According to comments, the above doesn't work in Internet Explorer. Try the following instead:
$('div').filter(function() {
return $(this).css('height') == '50px';
}).css('background-color', 'orange');
If you want to match other elements with a height of 50px not specified using an attribute, take a look at the .filter() function.
If your HTML is...
<div style="height:50px;"></div>
Then your selector should be...
$('div[style*="height:50px"]');
If you are setting height to the value of "50px" and " 50px" (common), you will need to adjust accordingly...
$('div[style*="height:50px"], div[style*="height: 50px"]');
If you change the CSS of this element, the div's style attribute might become: "height:50px;background-color:orange", and it would cease to get picked up by this selector.
Docs: https://api.jquery.com/attribute-contains-selector/
My problem seemed easy at first but i got stuck.
I have some containers (divs) in my page with some custom attributes.
<div class="myclass" myattr1="blah" myattr2="text1-text2-text3-text4-"></div>
myattr1 and myattr2 are defined by me.
All divs are visible on page load.
Now, depending on user selection from a list, i want to show only the divs with myattrib1="blah" and hide the rest.
I tried the following code, with no success at all
$('#mySelectID').change(function()
{
var startName = $(this).val();
$(".myclass").not('[myattrib1!="+startName+"]').toggle();
});
The same approach will be used to filter results by attrib2, but there i will use myattrib2|="+startName+" ( i think this is correct - thats why i have the extra - on the end of myattr2="text1-text2-text3-text4-").
Can anyone advice me on how to properly achieve this kind of filtering?
thank you!
You are close, but as you can see form the syntax highlighting, your are not performing string concatenation. +startName+ will be taken literally. Fix the quotes and your fine:
.not('[myattrib1!="' + startName + '"]')
Note that you should be using data-* attributes instead of custom ones.