I don't know why with the following template ng-click doesn't work:
<div>
<md-icon ng-click="console.log('hello'); $event.stopPropagation();" md-font-icon layout-fill ng-
class="md-raised inline-icon fa statusCellIcon" style="z-index:1000;">
</md-icon>
$event.stopPropagation() executes but not the console.log.
someone knows why?
Thank you.
Try to add this:
variable $scope.console = window.console;
The solution if someone is interested by was:
Expose the method to the ui-grid by adding the following to the grid options:
appScopeProvider: someFunction: function () { doSomeThing(); }
And in the ColumnTemplate of the grid add the following code:
<div>
<md-icon md-font-icon layout-fill class="inline-icon fa"
ng-click="grid.appScope.someFunction(); $event.stopPropagation();"
ng-style="{'cursor':'pointer'}">
</md-icon> ...</div>
Related
It is super easy problem but I just can't seem to figure this out (And yes I have read the documentation).
I am trying to get the input user puts in the ion-searchbar (in Ionic v4) after they the press search and put in a const/let.
Mah HTML
<ion-searchbar showCancelButton="focus" class=""></ion-searchbar>
I don't know how I should write the TS for this.
Thanks in advance :{)
Use (search) event to call your function. This event is fired when the user will click on the search button provided by the ion-searchbar.
To get the value entered in the searchbar, use $event.target.value which gets the value field of the tag which in this case is <ion-searchbar>
<ion-searchbar
showCancelButton
searchIcon="search"
animated
cancel-button-icon
(ionCancel)="hideSearch()"
(search)="yourSearchFunction($event.target.value)"
placeholder="Search Some Values">
</ion-searchbar>
To listen to changes as user types in the search bar:
<ion-searchbar
...
(ionInput)="yourInputChangeFunction($event.detail.value)">
</ion-searchbar>
Note: On Ionic 6+, (ionInput) strangely emits value on $event.target.value although, their documentation mentions $event.detail
In your .html file:
<ion-searchbar
[(ngModel)]="autocomplete.input"
(ionInput)="updateSearchResults()"
placeholder="Search for a place">
</ion-searchbar>
In your .ts file:
export class LoginPage{
autocomplete: { input: string; };
updateSearchResults() {
console.log(this.autocomplete.input) //search input will display
}
}
Hope this works.
Html file.
<ion-toolbar>
<ion-searchbar
debounce="1000"
(ionChange)="ionChange($event)">
</ion-searchbar>
</ion-toolbar>
ts file
ionChange(event) {
console.log(event.detail.value)
}
Always Read Documentation of API, Plugins or anything which you are looking for.
You will get data by using ionChange() or ionInput().
Use following code in HTML file
<ion-searchbar
showCancelButton="focus"
ionInput="getData()"
class="">
</ion-searchbar>
and in TypeScript.
public getData(){
//ur logic here
}
Get a reference to the searchbar using the #ViewChild directive:
View:
<ion-searchbar #search></ion-searchbar>
Component:
#ViewChild('search', {static: false}) search: IonSearchbar;
Thereafter, get the value of the ion-searchbar as follows:
const input = await this.search.getInputElement();
const searchValue = input.value;
I am developing with scalajs and binding.scala. I'm using the IDE as an Intellij. However, when using dom macro in Intellij, the following red mark appears. this error appears when I use the attribute value of id in the input element as macro What is the solution?
This error(a.k.a. "cannot resolve symbol something") appears when you use the id attribute value of the input element as marco.
please see the link of image below.
this is my code image.
#dom
def render: xml.Elem = {
val name: _root_.com.thoughtworks.binding.Binding.Var[_root_.java.lang.String] = Var.apply("Binding.scala")
val show: _root_.com.thoughtworks.binding.Binding.Var[Boolean] = Var.apply(false)
<div>
<p>
<label for="showCheckbox">
<input type="checkbox" id="showCheckbox" onchange={e: Event => show.value = showCheckbox.value }/>
<span> Say hello to <input id="nameInput" value={name.value} oninput={_: Event => name.value = nameInput.value}/></span>
</label>
</p>
{
if (show.bind) {
<p>
Hello, {name.bind}!
</p>
} else {
<!-- Don't show hello. -->
}
}
</div>
}
I actually have the same problem. I have 2 ways dealing with it:
Ignore these exception - as they are only a problem within IntellIJ
(it compiles just fine).
Use for example JQuery like this:
import org.scalajs.jquery.jQuery
..
jQuery("#showCheckbox").value()
As soon as your id gets more dynamic - you will need something like that anyway (at least that is what I know;)) -> jQuery(s"#${elem.id}").value().
You could take advantage of the scalaJS Event passed in, maybe something like:
oninput={ev: Event => name.value = ev.target.asInstanceOf[HTMLInputElement].value}
I would like to create a dynamic form using polymer, meaning that everytime the user press "add" button,it will add a new field in the form. Or, more specifically, it will add a paper-dropdown-menu, where all of the options come from a dom-repeat fed by an ajax call.
this is what i've done so far:
<div id="filterContainer">
<div class="flex rulesForm" id="filter1">
<paper-dropdown-menu name="rule1A" no-label-float>
<paper-listbox attr-for-selected="value" selected="{{filter1A}}" class="dropdown-content" id="thirdPartyFilter1A">
<template is="dom-repeat" items="{{rule1A}}">
<paper-item value="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
</div>
<paper-button raised on-tap="addFilterField">Add</paper-button>
<div>
and in the JS:
addFilterField: function () {
let dropdown = document.createElement('paper-dropdown-menu');
dropdown.name = "";
dropdown.noLabelFloat = true;
let listbox = document.createElement('paper-listbox');
listbox.class = "dropdown-content";
listbox.attrForSelected = "value";
listbox.selected = "{{filter1A}}";
let paperItem = document.createElement('paper-item');
paperItem.value = "[[item]]";
var itemNode = document.createTextNode('[[item]]');
paperItem.appendChild(itemNode);
listbox.appendChild(paperItem);
dropdown.appendChild(listbox);
console.log(dropdown);
filterContainer.appendChild(dropdown);
my problem is about the data-binding... If I use createTextNode with [[item]], it will simply write it as a string in the document. Is there a way to fix this? (or a way easier solution to add field in a form?)
first of all you cannot use binding notation in javascript. it is markup
2nd, polymer doesn't yet support creating data bindings dynamically. however I'm sure you can accomplish what you are trying to do.
3rd,
you have to use the Polymer Dom API. https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api
instead of paperItem.appendChild(itemNode)
you would use
Polymer.dom(listbox).appendChild(itemNode);
How to achieve the following structure dynamically in GWT without using the HTMLWidget?
<div class="samplecheckbox">
<label><input type="checkbox">Remember me</label>
</div>
Simple solution
Create an instance of FlowPanel. (This creates the outer div)
Add the Checkbox to it. (This creates the checkbox to div with label embedded)
This should work:
Element divElem = DOM.createDiv();
divElem.addClassName("samplecheckbox");
Element labelElem = DOM.createLabel();
Element checkElem = DOM.createInputCheck();
checkElem.setInnerText("Remember me");
labelElem.appendChild(checkElem);
divElem.appendChild(labelElem);
I have the following setup, where I want Protractor to click on a row (or the checkbox in a row, either is fine):
<li data-ng-repeat="room in chatRooms | ***filters***">
<div ng-click="toggleJoin(room.id)">
<input type="checkbox" value="{{room.id}}" ng-checked="isChecked(room.id)" />
<span>{{room.name}}</span>
</div>
</li>
And I want to do this with my Page Object:
var PageObject = function() {
this.lstChatRooms = element.all(by.repeater('room in chatRooms'));
this.clickChatRoom = function(index) {
this.lstChatRooms.row(index).column('{{room.id}}').click();
};
};
But when I try to call clickChatRoom with some index in my test, I get an error saying the object has no method 'row', and I've seen the same behavior with 'column'. I'm not calling anything on the list of chat rooms prior to this in my test, so the promise should not be resolved at that point. What am I doing wrong?
Update: The issue may be caused by this bug. Unless anyone can see that I'm doing something wrong with the API or something else.
i can't test it right now, but this should work for you:
this.lstChatRooms.then(function(rooms) {
rooms[index].findElement(by.tagName('input')).click();
});