i have a ion-range button I have set it to min and max value in dual knob but both the knob are located to the min value
<ion-range dualKnobs="true" [(ngModel)]="knobValues" pin="true" min="50" max="250" color="dark" >
<ion-label range-left > <b>50</b> </ion-label>
<ion-label range-right > <b>250</b> </ion-label>
</ion-range>
set this after my constructor(){}
knobValues:{
upper:100,
lower:50
}
Currently i an getting like this
I need it to be like this on page load
Could someone help me
In typescript, the way to set class variable is
variable_name:type = value;
knobValues:{
upper:100,
lower:50
}
Above you have set the type of knobValues and its content is undefined.
Set as
knobValues:{ upper:number,lower:number}={
upper:100,
lower:50
}
Related
I got a simple grid used like this :
<div id="planningGridDiv"
class="gridPatientContent"
style="height: 450px;min-height: 300px;"
ng-style="{height: showScores ? '150px': '450px'}"
ui-grid-resize-columns
ui-grid-selection
ui-grid-cellNav
ui-grid-pinning
ui-grid="myData"
class="grid">
</div>
But when showScores is true and height pass from 450 to 150 px, the grid itself doesn't shrink.
The first container see its height changed, but this part no :
<div role="grid" ui-grid-one-bind-id-grid="'grid-container'" class="ui-grid-render-container ng-isolate-scope ui-grid-render-container-body" ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }" ui-grid-render-container="" container-id="'body'" col-container-name="'body'" row-container-name="'body'" bind-scroll-horizontal="true" bind-scroll-vertical="true" enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar" enable-vertical-scrollbar="grid.options.enableVerticalScrollbar" aria-multiselectable="true" id="1490734763451-grid-container" style="margin-left: 180px; margin-right: 80px;">
I can't find any solution on doc nor stack overflow, but it seems to me that it should. I can use some help for some pointers.
FYI, I found a solution on another stackoverflow question, but I changed it a bit to fit my needs :
$scope.showScoreDiv = function()
{
$scope.showScores = !$scope.showScores;
$timeout(function(){
$scope.gridApi.grid.handleWindowResize();
}, 1);
};
So the main idea is to change the height via ng-style on the grid div, and when you fire your event, here showScores = true called by showScoreDiv(), you have to call gridApi.grid.handleWindowResize().
The timeout is just here to give some time to the div to be set to the good height before calling handleWindowResize().
Is it possible to preform something akin to s:List.ensureIndexIsVisible(int) but scrolls to an item on the list without using its index?
In my case, I have a list of 5000+ teams. I need to be able to quickly navigate to a specific team, so on top of a search I'm implementing a system similar to iOS's UITableView Index List. The main difference between my system and that one is that mine will not have a header for each section.
At the moment, each button calls the s:List.ensureIndexIsVisible() function. However, I need to be able to jump to a specific team number, not an index. (Some teams no longer exist and therefore aren't in the list).
Is it possible to use a property of an item (the labelField, for example) to find its index? (The opposite of s:List.itemToLabel())
Here's what the app looks like:
This isn't 100% perfect, but I've cobbled together a pretty good solution. The only problem now is using the ensureIndexIsVisible function, as it doesn't necessarily put the desired index at the top of the screen. I'm probably going to work on a workaround for that too though.
Relevant Actionscript code:
protected function getItemIndexByProperty(array:ArrayCollection, property:String, value:String):int
{
for (var i:int = 0; i < array.length; i++)
{
var obj:Object = Object(array[i])
if (obj[property] == value)
return i;
}
return -1;
}
protected function getNearestTeamIndex(teamnumber:int):int
{
for (var i:int = teamnumber; i < (teamnumber+10); i++)
{
var result:int = getItemIndexByProperty(teamListArray,'teamnumber',i.toString());
if (result != -1)
return result;
}
return -1;
}
Relevant MXML code
<s:VGroup width="10%" height="100%" horizontalAlign="center" verticalAlign="middle" color="0x999999">
<s:Label id="firstIndex" text="1-999" click="teamList.ensureIndexIsVisible(getNearestTeamIndex(1))"/>
<s:Spacer height="10"/>
<s:Label id="secondIndex" text="1000's" click="teamList.ensureIndexIsVisible(getNearestTeamIndex(1000))"/>
<s:Spacer height="10"/>
<s:Label id="thirdIndex" text="2000's" click="teamList.ensureIndexIsVisible(getNearestTeamIndex(2000))"/>
<s:Spacer height="10"/>
<s:Label id="fourthIndex" text="3000's" click="teamList.ensureIndexIsVisible(getNearestTeamIndex(3000))"/>
<s:Spacer height="10"/>
<s:Label id="fifthIndex" text="4000's" click="teamList.ensureIndexIsVisible(getNearestTeamIndex(4000))"/>
<s:Spacer height="10"/>
<s:Label id="sixthIndex" text="5000's" click="teamList.ensureIndexIsVisible(getNearestTeamIndex(5000))"/>
</s:VGroup>
The polymer js docs say you have to listen for the WebComponentsReady event to know when the polymer elements have been set up. What's the equivalent in Dart?
Here's my template:
<template id="order_name" bind repeat>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#order_list" href="#collapseOne">
{{commonName}} ({{scientificName}})
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
</template>
And here's main:
void main() {
OrderList().then((order_data) {
query("#order_name").model = order_data;
print (queryAll(".accordion-heading")); //null
}).catchError((err) => print(err));
query("#my-button").onClick.listen((Event e) {
print (queryAll(".accordion-heading")); //[div,div]
});
}
OrderList is a wrapper around HttpRequest.getString() and returns a future. My thought was to use an event like WebComponenentsReady to know when the template had been fully instantiated. The base question is how can I get at the .accordion-heading divs in main so I can attach listeners to them?
I assume that you are using boot.js. if you are, they should be initialized by the time you program enters main().
According to the spec (https://www.dartlang.org/articles/web-ui/spec.html#main-script):
...you cannot query for children of conditional and iteration nodes. ...To retrieve a component instance you need to defer queries until the end of the event loop, for example using a Timer.run(f).
So the code above needs to be modified like this:
void main() {
OrderList().then((order_data) {
query("#order_name").model = order_data;
print (queryAll(".accordion-heading")); //null
Timer.run( () => print (queryAll(".accordion-heading"))); //[div,div]
}).catchError((err) => print(err));
query("#my-button").onClick.listen((Event e) {
print (queryAll(".accordion-heading")); //[div,div]
});
}
So I'm running through the tutorial for AngularJS:
I have an array defined in the controller and i'm returning different points in the array by calling when i'm looping through ng-repeat {{feature.name}} {{feature.description}}
What i don't understand is lets say i have a third point in the array called "importance" and it's a number from 1 to 10. I don't want to display that number in the html but what i do want to do is apply a different color to the feature if that "importance" number in the array is 10 vs 1
so how do i write an if statement to do this:
i.e.
<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>
no idea if that's right but that's what i want to do
I do not think there is if statement available.
For your styling purpose, ng-class can be used.
<p ng-class="{important: feature.importance == 10 }">
ng-switch is also convenient.
-- update --
take a look at:
https://stackoverflow.com/a/18021855/1238847
angular1.2.0RC seems to have ng-if support.
Actually there is a ternary operator in Angular 1.2.0.
<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>
I think the answer needs an update.
Previously you could use ngIf directive from AngularUI project (code here if you still want to download it), bad news is that it's not maintained any more.
The good news is that it has been added to the official AngularJS repo (unstable branch) and soon will be available in the stable one.
<div ng-if="something"> Foo bar </div>
Will not just hide the DIV element, but remove it from DOM as well (when something is falsy).
ng-class is probably the best answer to your issue, but AngularUI has an "if" directive:
http://angular-ui.github.com/
search for:
Remove elements from the DOM completely instead of just hiding it.
I used "ui-if" to decide if I should render a data value as a label or an input, relative to the current month:
<tbody id="allocationTableBody">
<tr ng-repeat="a in data.allocations">
<td>{{a.monthAbrv}}</td>
<td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
</tr>
</tbody>
In the case where your priority would be a label, you could create a switch filter to use inside of ng-class as shown in a previous SO answer : https://stackoverflow.com/a/8309832/1036025 (for the switch filter code)
<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>
You can also try this line of code below
<div class="{{is_foo && foo.bar}}">
which shows foo.bar if is_foo is true.
This first one is a directive that evaluates whether something should be in the DOM only once and adds no watch listeners to the page:
angular.module('setIf',[]).directive('setIf',function () {
return {
transclude: 'element',
priority: 1000,
terminal: true,
restrict: 'A',
compile: function (element, attr, linker) {
return function (scope, iterStartElement, attr) {
if(attr.waitFor) {
var wait = scope.$watch(attr.waitFor,function(nv,ov){
if(nv) {
build();
wait();
}
});
} else {
build();
}
function build() {
iterStartElement[0].doNotMove = true;
var expression = attr.setIf;
var value = scope.$eval(expression);
if (value) {
linker(scope, function (clone) {
iterStartElement.after(clone);
clone.removeAttr('set-if');
clone.removeAttr('wait-for');
});
}
}
};
}
};
});
This second one is a directive that conditionally applies attributes to elements only once without watch listeners:
i.e.
<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>
angular.module('setAttr',[]).directive('setAttr', function() {
return {
restrict: 'A',
priority: 100,
link: function(scope,elem,attrs) {
if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
//you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
var data = scope.$eval(attrs.setAttr);
angular.forEach(data, function(v,k){
if(angular.isObject(v)) {
if(v.value && v.condition) {
elem.attr(k,v.value);
elem.removeAttr('set-attr');
}
} else {
elem.attr(k,v);
elem.removeAttr('set-attr');
}
});
}
}
}
});
Of course your can use dynamic versions built into angular:
<div ng-class="{ 'myclass' : item.iscool }"></div>
You can also use the new ng-if added by angularjs which basically replaces ui-if created by the angularui team these will conditionally add and remove things from the DOM and add watch listeners to keep evaluating:
<div ng-if="item.iscool"></div>
What also works is:
<span>{{ varWithValue || 'If empty use this string' }}</span>
ColdFusion 8
I have a cfgrid that that is based on a query. It is not bound to a cfc function because I want a scrolling grid, not a paged grid (you must supply the page number and page size if you use BIND).. I can figure out how to make it filter on one column by using the following code, but I really need to filter on three columns...
grid.getDataSource().filter("OT_MILESTONE",t1);
Adding more to the filter string does not do the trick...it ignores anything more than the first pair of values..
so..I thought if I called a function that passes the three values and returned the query results to me, I could replace the Data Store for the grid..but I cannot figure out the syntax to get it to replace.
The returned variable for the query has the following format:
{"COLUMNS":["SEQ_KEY","ID","OT_MILESTONE"],"DATA":[[63677,"x","y"]]}
Any ideas?
have you looked at queryconvertforgrid()?
http://www.cfquickdocs.com/cf9/#queryconvertforgrid
Update: have you looked at these?
http://www.danvega.org/blog/index.cfm/2008/3/10/ColdFusion-8-Grid-Filtering
http://www.coldfusion-ria.com/Blog/index.cfm/2009/1/13/Playing-with-cfgrid--Filter-showhide-Columns-and-using-the-YUI-Buttons-library
http://cfsilence.com/blog/client/index.cfm/2007/8/9/Filtering-Records-In-An-Ajax-Grid
after much blood, sweat, tears and swearing..here's the answer, in case anyone else might need to filter a cfgrid by more than one variable:
var w1 = ColdFusion.getElementValue('wbs');
var t1 = ColdFusion.getElementValue('task');
var p1 = ColdFusion.getElementValue('project');
grid = ColdFusion.Grid.getGridObject('data');
store = grid.getDataSource();
store.clearFilter();
store.filterBy(function myfilter(record) {
var wantit = true;
if (trim(w1) != '') {
if(record.get('WBS_ID') != w1) {
wantit = false;
}}
if (trim(t1) != '') {
if(record.get('OT_MILESTONE') != t1) {
wantit = false;
}}
if (trim(p1) != '') {
if(record.get('PROJECT') != p1) {
wantit = false;
}}
return wantit;
});
ColdFusion.Grid.refresh('data',false);
you will need a JS trim function...
Make sure the column names are caps...