Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hello all fellow engineers , i have seen so many questions and well suggesting answers regarding setting focus on some input field but i didn't found anything which will fulfill my requirements , now my question is if we have multiple input fields and we don't know where to set the focus , and on some condition basis i want to set focus on some field back from controller, is there anything like "document.getElementbyId("").focus" as in javascript with "ng-model" or something , any help will be appreciated thanks
This directive will cause an element to receive focus when the passed in expression is truthy.
Live Demo
Usage:
<!-- set `$scope.foo` to a truthy value when this input should be focused -->
<input type="text" focus-when="foo">
<button ng-click="foo = true">Focus input.</button>
The directive:
.directive('focusWhen', function() {
return {
scope: {
focusWhen: '='
},
link: function($scope, $element) {
$scope.$watch('focusWhen', function(shouldFocus) {
if (shouldFocus) {
$element[0].focus();
}
});
}
};
})
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm working on migration of angular1.5 to angular10. My current code in angular1.5 with mobx(mobx-angularjs package is being used).
I have used downgradeComponent approach.
export default angular
.module('test', [])
.directive('myTest', downgradeComponent({component: MyTestComponent}) as angular.IDirectiveFactory);
angularjs template
<input ng-model="$ctrl.store.personname" name="personname" maxlength="40"/>
angular10 template
<input [(ngModel)]="store.personname" name="personname" maxlength="40"/>
After changed angular10 template, data binding is not working. Does angular10 expects mobx-angular pacakge instead of mobx-angularjs package?
I tried https://github.com/mobxjs/mobx-angular but no luck.
try to import FomrsModule in your app.module !
import { FormsModule } from '#angular/forms';
imports: [
....
FormsModule ,
]
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
How would we implement something like "padding: 0 10px" for inline styling on a React element? It throws an error if I give the padding or margin properties the shortcut syntax, so I have to explicitly declare paddingTop, paddingRight, etc. I don't see anything on the React docs to address this, so I'm wondering if it's possible to use the shortcut in React?
It is possible you just probably have a typo or accidentally wrote it wrong. The syntax to apply an inline style follows this pattern.
{{property: 'value'}}
you can't add a semi colon in the value for a property.
inline styles are denoted as an object for react. and the syntax to apply a property or read something as javascript in the react render method is also denoted with curly braces.
So to apply that to your specific question, you would just do this.
<div style={{margin: '0px 10px'}} />
if you are using a style variable that is defined before the return of your render function you can use it like so.
const divStyles = {
margin: '0px 10px'
}
// ... in the render return
<div style={divStyles} />
Sample Fiddle with shortcut padding and margin used
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have the following click handler:
<Select
name="batchCompChooser"
value={this.state.batchCompId}
options={batchCompItems}
clearable={false}
onChange={this.handleBatchCompChange()}
/>
However, I get the following error from the onChange line:
BatchComponentChooser.js?0aaf:54 Uncaught TypeError: Cannot read property 'value' of undefined
How do I fix this?
If you have an event handlers, such as onClick, it is easy to accidentally do this:
onClick={this.someFunc()}
REMOVE THE parens ()
That will actually invoke the function immediately on render.
Instead you want to pass a reference to a function like this:
onClick={this.someFunc}
So in my case it should look like this:
<a onClick={this.doSomething}>Do something link</a>
If you need to pass parameters, you can do it like this with the arrow function:
<a onClick={() =>this.doSomething(true)}>Do something link</a>
Specifically in the example above the onChange should have the trailing parens removed, it should be changed to:
<Select
name="batchCompChooser"
value={this.state.batchCompId}
options={batchCompItems}
clearable={false}
onChange={this.handleBatchCompChange}
/>
Hope that helps someone out there...
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to figure out how to implement the "android" feel on Onsen-UI by using the 'swipe' navigation.
I tried implementing idangerous swiper, but not having much luck. My idea is to combine:
http://codepen.io/negibouze/pen/jEvOYz
enter code here
http://codepen.io/negibouze/pen/wBLeyp
enter code here
When you swipe, the tabs change but has that swipe animation/effect. I also would love it if each tab/swipe was a different html and not one index file.
Any ideas or help?
Great question. There are two different approaches:
As it's done in your second example, using tabbar and gesture detector. Onsen 2.0 has a slide animation for tabbar, so you just need to add <ons-tabbar animation="slide" ... >. Onsen 2.0 is still in alpha version but it will be released in the upcoming weeks. The drawback of this approach is that the slide animation starts after the swipe action is completed.
You basically add your ons-tabbar element and then configure the gesture detector as follows:
ons.ready(function() {
// Create a GestureDetector instance over your tabbar
// The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...)
var gd = ons.GestureDetector(myTabbar._element[0]);
gd.on('swipe', function(event) {
var index = myTabbar.getActiveTabIndex();
if (event.gesture.direction === 'left') {
if (index < 3) {
myTabbar.setActiveTab(++index);
}
} else if (event.gesture.direction === 'right') {
if (index > 0) {
myTabbar.setActiveTab(--index);
}
}
})
});
Working here: https://jsfiddle.net/frankdiox/o25novtu/1/
Combining ons-tabbar and ons-carousel elements. The drawback of this approach is that ons-carousel-item cannot get a template or separated file (check the comments to find another workaround to this).
ons-tab requires a page attribute and you cannot leave it blank without errors in the console, but we can use ons-tabbar's style instead of the actual component: http://onsen.io/reference/css.html#tab-bar
We combine it now with a fullscreen carousel like the one you mentioned and add the next CSS to make the page content respect our tabbar so it does not fall over or behind it:
ons-carousel[fullscreen] {
bottom: 44px;
}
Next step, we link every tab with its corresponding carousel item:
<div class="tab-bar" id="myTabbar">
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)">
...
</div>
And so on. This will make that when we click on a tab the carousel changes automatically. Now we need to do the opposite connection: update the checked tab when we swipe the carousel. The tabbar is basically a set of radio buttons, so we just need to get the one we want in the carousel's postchange event and check it:
ons.ready(function(){
carousel.on('postchange', function(event){
document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true;
});
});
You can now change the content of every carousel-item-index and insert an ons-page with anything you want.
Working here: http://codepen.io/frankdiox/pen/EVpNVg
We may add a feature to make this easier in upcoming versions of OnsenUI.
Hope it helps!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
After running through ALL the examples, I guess my only choice is doing a custom template based somewhat on this example , although not every row will have children.
Does anyone have any recommendations for this kind of implementation?
Thank you,
Stephen
Start using columnDefs in grid options and specify a cell template. Below is an example i did a while ago.
$scope.gridOptionsForLocationList = {
data: yourdata,
selectedItems: $scope.selectedLocations,
showFilter: false,
showColumnMenu: false,
headerRowHeight: 0,
enableRowSelection: false,
columnDefs: [
{field:'cityId', displayName:'#', width: 0},
{field:'suburbId', displayName:'#', width: 0},
{field:'cityName', displayName:'City'},
{field:'suburbName', displayName:'Suburban'},
{ field: '',cellClass:'right' , cellTemplate: '<button type="button" class="btn btn-link btn-mini" ng-click="deleteLocations(row)">click</button>' }]
};
In cell template, write an html that wraps the text on a second line and give an indent for a child div. Maybe that may help your case.