I have a question in polymer
valueCategoryChange: function() {
this.set("mycategory", this.$.comboCategory.selectedItem);
},
<vaadin-combo-box on-value-changed="valueCategoryChange" id="comboCategory" items="{{categories}}" item-value-path="id" value="{{category22}}" item-label-path="display" required>
if I select from combobox everything work well and valueCategoryChange()
shows selectedItem.
but when I select an item in combobox programmatically from value
this.category22 = data.CatId; ,that item is shown in combobox but in valueCategoryChange function, this.$.comboCategory.selectedItem is null
please help me
If you use like below:
<vaadin-combo-box selected-item="{{mycategory}}" id="comboCategory" items="{{categories}}" item-value-path="id" value="{{category22}}" item-label-path="display" required>
<div> Selected Item is [[mycategory]]</div>
then you will have a selected item property as mycategory. Also you will not need a valueCategoryChange function and on-value-changed="valueCategoryChange" event.
Beside this if you need to set event and want to use the functions than you can use:
valueCategoryChange: function() {
console.log(this.mycategory); // is the selected item that you can use
// this.set("mycategory", this.mycategory) will not be useful :))
},
(Run below code snipped) or DEMO
HTMLImports.whenReady( ()=> {
class XFoo extends Polymer.Element {
static get is() {
return 'x-foo';
}
}
window.customElements.define(XFoo.is, XFoo)
})
<head>
<script
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-grid/all-imports.html">
</head>
<body>
<x-foo id="xfoo"items="{{categories}}"></data-table-d>
<dom-module id="x-foo">
<template>
<vaadin-combo-box selected-item="{{mycategory}}" id="comboCategory" items="{{categories}}" value="{{category22}}" ></vaadin-combo-box><br><br>
<div> Selected Item is [[mycategory]]</div>
<script>
var el = document.getElementById('xfoo');
el.categories=['Cat1', 'Cat2','Cat3'];
</script>
</template>
</dom-module>
Related
I am developing React js app with Material UI.
I have implemented onClick in List and List Item.
enter image description here
I want to implement onRightClick event as well.
Please help me.
Use onContextMenu event where you want to show your default context menu, not browser context menu.
there is onContextMenu event in react defined events. if you want to change the rightClick action on your component or part of your component you need to write a custom eventHandler for onContextMenu event.
<div onContextMenu={this.someEvenetHandler}></div>
someEventHandler = (e) => {
"Do stuff here"
}
or something like that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
var App = React.createClass({
handleClick: function(e) {
if (e.type === 'click') {
console.log('Left click');
} else if (e.type === 'contextmenu') {
console.log('Right click');
}
},
render : function(){
return <p onClick={this.handleClick} onContextMenu={this.handleClick} >Something </p>
}
});
React.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
Try running above snippet you will be able to identify left and right click respectively.
According to the react docs, onContextMenu is the correct prop to pass. To prevent the standard functionality, you probably need to add e.preventDefault(); to your callback function.
Im using AngularJS 1.5x
I have a Web Form to submit Car information 1)model, 2)make to Backend(Api: SaveCarDetails).to save this form information in the Backend DB.
On success, I have to make a API call(GetCarsInfo) to get the array list of cars information(so far saved in the BE).
I need to display car information Cards showing the make & model and with EDIT button so that user can update exactly that particular car information and we use (SaveCarDetails same API as used for adding new details).
On the succesfull update, I need to again make to call to (GetBanks) to get the updated list of bank account information.
Now I need to show Tickmark Icon ONLY on the Car info card that has been updated or newly added.
What is the best way to do this? (show the icon only on the card that got updated or newly added).
How to find out exactly which card is updated by comparing or watching an Object? there is no unique identifier that is being passed for any updates to the response object.
I tried to do an $watch on the object but I couldn't get it to work.
Here is the code: http://plnkr.co/edit/RztTjy?p=preview
// Code goes here
angular.module('app', [])
.controller('MyCtrl', function($scope) {
var vm = this;
vm.carobj = [{
'make': 'acura',
'model': "TL",
'name':'joe'
},
{
'make': "bmw",
'model': '5series',
'name':'doe'
}];
console.log(vm.carobj);
});
/* Styles go here */
.card{
border: 10px solid #cccccc;
width: 200px;
height:160px;
margin:20px;
position:relative;
}
.tickWhenUpdated{
float:right;
position:absolute;
right:0;
bottom:0;
}
.editbtn{
width:100px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="angularjs#1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Hello Plunker!</h1>
<div ng-controller="MyCtrl as mc">
<div class="card" ng-repeat="car in mc.carobj">
<p>Car Info Box </p>
<i class="fa fa-check tickWhenUpdated" aria-hidden="true"></i>
Account num:{{car.make}} <br />
Routung num: {{car.model}} <br />
<input value="edit" class="btn btn-primary editbtn" type="button" />
</div>
</div>
</body>
</html>
First of all, instead of dynamically updating the class using ng-class or something, you could just set a variable on the car objects called updated that is truthy when the car was updated. Then place ng-show="car.updated" on the tag.
Regarding how to set that updated variable on the object, you can either try to manipulate it directly when you click the edit button. Just pass the element to a function which will modify the updated field. Something like;
Html:
<div ng-repeat="car in cars">
<input type="button" ng-click"update(cars, car.id)">
</div>
Js:
$scope.update = function(cars, id) {
cars = cars.map(function(car) {
if (car.id == id) {
car.updated = true
} else {
car.updated = false
}
})
}
If you absolutely don't have an ID, the only thing I can think of is to put something that increments on the object (unix timestamp, incrementor). Something like
Js:
$scope.itr = 0;
$scope.update = function(car) {
$scope.itr++
car.itr = $scope.itr
}
Then have an ngChange on the array that calls a function and sets car.updated to false on all objects except the one with the largest itr value, which it sets to true.
This is a hardcore hack, and I would really try to just have some sort of unique ID.
I am trying to use the Selectize jQuery plugin in a Polymer element, wrapping the selectize CSS and JS files in selectize-css.html and selectize-js.html for importing. The JS import works, but the style module (https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules) for the CSS does not. The selectize CSS rules are not matching the HTML generated by selectize inside the Polymer element.
Here is my element:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.css"> -->
<link rel="import" href="./selectize-css.html">
<link rel="import" href="./selectize-js.html">
<dom-module id="subject-picker">
<template>
<style include="selectize-css"></style>
<select id="selector" value="{{selection::change}}">
<option value="" disabled selected>Pick a number...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</template>
<script>
Polymer({
is: 'subject-picker',
properties: {
selection: {
type: String,
notify: true
}
},
attached: function () {
var _this = this;
$(this.$.selector).selectize({
// When the user selects a different option, update the selection property.
onChange: function (newValue) {
if (_this.selection != newValue) {
_this.selection = newValue;
}
}
});
}
});
</script>
</dom-module>
And here is the selectize-css.html style module:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="selectize-css">
<template>
<style>
// contents of selectize.bootstrap3.css go here
</style>
</template>
</dom-module>
If I include the CSS directly rather than with a style module (uncomment second line of element code), the CSS does work properly. I have gotten style modules to work in other cases, but cannot figure out what I am doing wrong here. Any ideas?
Thanks,
Dennis
Polymer style modules started working after I set the global dom setting to "shadow":
<head>
<script>
/* see https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules */
window.Polymer = {
dom: 'shadow'
};
</script>
I have a polymer component defined as below:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="add-money">
<template>
<style></style>
<paper-dialog id="add-money-dialog" modal >
<h2>Add money</h2>
<paper-dialog-scrollable>
<div>
<span>{{account.name}}</span>
</div>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Add</paper-button>
</div>
</paper-dialog>
</template>
<script>
var AddMoney = Polymer({
is: 'add-money',
properties: {
account: {
type: Object,
notify: true,
}
},
factoryImpl: function(acc) {
this.account=acc;
},
showPopup:function(){
console.log(JSON.stringify(this.account));
var dialog = document.getElementById("add-money-dialog");
if (dialog) {
dialog.open();
}
}
});
</script>
</dom-module>
Now, I instantiates it and add to body on click of a button from another component.
addMoney:function(e){
var button = e.target;
var dialog = new AddMoney(e.model.item);
document.body.appendChild(dialog);
dialog.showPopup();
}
While doing that, I am able to see that data available in showPopup method, but the same does not reflect on the DOM.
Curious, what could be the problem and what is the fix for it. I am a newbee to this and trying to write some component based code to understand polymer. Please advice on this. Thanks in advance.
It was infact an issue with the styles. I thought the value is not coming up since there was nothing displayed. But it was actually hidden and I could not see it. I added some styles ot the paper-dialog-scrollable and now I can see the values.
I'm using bootstrap and angular to build an application. In a HTML page, i'm using this:
<div class="btn-group-justified" data-toggle="buttons-checkbox">
<button type="button" class="btn fzbtn-consServices" ng-repeat="service in availability.services">{{service.name}}</button>
</div>
It's building a button group with dynamic values. Is there a practical way to obtain the selected buttons inside this button group?
I already tried some solutions, some of them are working but I don't know if it's the best way...
1: On "ng-click" method I would change a attribute value (eg. "checked" attribute) of each service to true or false;
2: I searched about any html attribute for btn-group which could offer me all the selected buttons inside this group, but i had no success;
3: I heard that i could beat this problem using Angular Filter, but i didn't find any similar example;
Anyone with a better idea? Thanks so much :)
This is the best solution I found until now:
<div class="btn-group-justified" data-toggle="buttons-checkbox">
<button type="button" class="btn fzbtn-consServices" ng-repeat="service in availability.services" ng-click="onClickService(service)" ng->{{service.name}}</button>
</div>
Controller:
$scope.onClickService = function (service) {
if (service.checked) {
service.checked = "false"
} else {
service.checked = "true";
}
}
Answer: Bootstrap UI
I feel your pain. Bootstrap is not always angular-friendly. But there is a good solution:
The easiest (and by far the cleanest) approach is to use Bootstrap UI. Built by the Angular Team, it is a rewrite of the javascript-portion of Bootstrap but for an Angular-friendly usage. Here's the section about buttons: http://angular-ui.github.io/bootstrap/#/buttons
Example solution: Checkbox button behavior
In this solution, the initial services array is used to store a boolean field 'selected' to know if any particular service is selected or not. (Similar to the "checked" in the question). This field is 2-way bounded to the checkbox state. Clicking the checkbox changes the field and changing the field changes the checkbox state.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A' },
{ name:'Service B', selected:true },
{ name:'Service C' },
{ name:'Service D', selected:true }
];
$scope.availability = { services:services };
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" btn-checkbox>{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services">{{service.name}} <span ng-show="service.selected">- selected</span></div>
</body>
</html>
Radio button behavior
I've included a solution for a "single selection" checkbox also known as a "radio-button". The "current selection" is bound to a variable on the scope. It will get updated automatically when the user picks an element. Setting it will, in turn, change the current selection.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A' },
{ name:'Service B' },
{ name:'Service C' },
{ name:'Service D' }
];
$scope.availability = { services:services };
$scope.model = {};
// Here we are using the service object instance as the "selection value".
// Depending on what you need, you could also use some sort of identifier or
// even the $index if that's more useful.
// Immediately select the second one.
$scope.model.selectedService = services[1];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="model.selectedService" btn-radio="service">{{service.name}}</label>
</div>
<div>Current Selection is: {{model.selectedService.name}}</div>
</body>
</html>
NOTE: I used <label> instead of <button>, but I did not have your special CSS styles so it wasn't behaving on the screen, functionality-wise it works equally well with <button> elements.
You don't really specify why you are wanting to "get" the buttons. In general, getting a reference to DOM elements like this is not the "angular way." It is generally better to find a way to use angular's data-binding to manipulate UI elements.
For instance, if you want to show or hide buttons based on data or on another UI event, then use ng-show or ng-hide bound to a property of the service object you are binding these buttons to. Then you can update the object's property to change the UI. You should be able to find a similar way to make other changes (like setting classes, attributes, etc.) with angular's data-binding rather than doing it manually.