What is the preferred way of using a number filter in ng-style? I have an image that I want to only be set to a whole number pixel value of height.
<img src="ok-button.png" ng-style="{'height': textHeight * 1.888 | number:0}">
The above code does not work but reflects what I'm trying to do.
Height property should have mentioned in pixel so you need to add px to indicate it is pixel.
You were using number filter which is used to change text to , separated currency representation, which would applicable to solve your case.
For rounding pixels you should have define function inside controller which will do Math.roud of that value & return it to the view.
HTML
ng-style="{'height': round(textHeight) + 'px'}"
Code
$scope.round = function(textHeight){
var result = textHeight * 1.88;
return Math.roud(result);
}
Related
So.
This is my first Angular adventure, but I've been coding web from db to php to html/js since -97.
I'm using AngularJS v1.6.5, http://jtblin.github.io/angular-chart.js/ and https://material.angularjs.org/latest/demo/slider in an app I'm building.
(Can't post all code or link to it due to customer)
In essence, I have a rest API fronting a database holding a number of areas which will each get a slider. Each slider will be bound to it's own dataset, and moving the sliders will affect elements in a number of charts through use of one more dataset holding a factor unique to each sliders area.
If I hardcode all the sliders and bind them to the right datasets it all works just as it should. each slider binds to it's own model, moving the sliders changes the data in the charts, great.
But since the database can get more areas, or fewer, I naturally want to create all the datasets for the models and the sliders from the db-data in the controller, and bind each slider to the right dataset through ng-repeat. To add to it, the same dataset will on change be passed from the slider to a service which does calculations before updating the charts.
My routing assigns the "ChartController as chart", and in the controller I do "var chartdata = this;" so I'm not using the actual $scope for the models.
In the controller I have one dataset holding the areas from the API which will get a slider, this holds a name and an id, then I will generate datasets for each slider holding the values for the sliders from another API call.
So I will in the controller generate multiple datasets from the data in the db, The idea was to name them like these where the Id of the slider area is the number at the end of the model-name:
//default slider settings from database
chartdata.slider_id_1 = 4;
chartdata.slider_id_2 = 3;
chartdata.slider_id_3 = 2;
chartdata.slider_id_4 = 6;
chartdata.slider_id_5 = 4;
chartdata.slider_id_6 = 7;
chartdata.slider_id_7 = 3;
chartdata.slider_id_8 = 9;
chartdata.slider_id_9 = 5;
chartdata.slider_id_10 = 8;
chartdata.slider_id_11 = 12;
chartdata.slider_id_12 = 1;
chartdata.slider_id_13 = 2;
// weighting for impact
chartdata.factor_id_1 = 0.24;
chartdata.factor_id_2 = 0.46;
chartdata.factor_id_3 = 0.97;
chartdata.factor_id_4 = 0.62;
chartdata.factor_id_5 = 0.125;
chartdata.factor_id_6 = 0.166;
chartdata.factor_id_7 = 0.33;
chartdata.factor_id_8 = 0.698;
chartdata.factor_id_9 = 0.489;
chartdata.factor_id_10 = 0.44;
chartdata.factor_id_11 = 0.12;
chartdata.factor_id_12 = 0.1;
chartdata.factor_id_13 = 0.22;
Then I have this in my template which iterates over the slider area dataset, this is where I would like to dynamically create the model names. ie. the chart.slider_id_XX and chart.factor_id_XX to map against the generated datasets.
<div ng-repeat="slider in chart.sliders">
<div flex="20" layout layout-align="center center" >
<span class="md-body-1">{{slider.Name}}</span>
</div>
<md-slider flex md-discrete ng-model="chart.slider_id_11" step="1" min="0" max="100" aria-label="{{slider.Name}}" id="{{slider.Id}}" ng-click="updateImpact(chart.slider_id_11,chart.factor_id_11);">
</md-slider>
</div>
So I can use the name and id of the sliderdata in some places, but not in the model binding where I, on the serverside would have concatenated together a string with the id from the slider object, but that does not work here, probably due to the order that javascript and ng-directives are processed.
I have looked at similar questions for a full day, but they tend to only solve one side of it, or seemingly, uses a collection of models and referring through array indexes, but I can't for the life of me get it to work.
I could resort to hardcoding it, just to get past the issue, but it would feel so stupid.
I have full control over all the code, everything from the SQL queries, to the data structure to the js code, and I'm not locked into the samples outlined above, so I'm quite flexible in implementing a smart, good practice solution, if there is one to be found.
Thankful for all and any help here!
/Dan
You can create dynamic model binding like this.
Create a generic object to hold values for all sliders.
$scope.SliderDTO = {};
Now bind ng-model in your sliders like this:
<md-slider flex md-discrete ng-model="SliderDTO[slider.Name]" step="1"
min="0" max="100" aria-label="{{slider.Name}}" id="{{slider.Id}}" ng-
click="updateImpact(chart.slider_id_11,chart.factor_id_11);">
</md-slider>
Finally the selected values will be available like this:
For slider name slider_id_1 value will be in $scope.SliderDTO.slider_id_1
Hi I have some fields which are coming dynamic and I am adjusting the col-md- according to number of fields. So I wrote an expression some thing like this <div class="col-md-{{12 / variants.length}} Now I want to round off the value. How can I do this ?
In your controller maybe try rounding there instead of on the HTML side?
You can use a function defined in the controller, e.g.
<div class="col-md-{{colWidth(variants.length)}}">something</div>
In the controller:
$scope.colWidth = function(nbVariants) {
// Use whatever formula suits your needs. Be aware that this may return 0
return Math.round(12/nbVariants);
}
In my angular app, I have a span element where I need to display some values from service response.
Currently it is showing like
> value = 20.00000000000
whereas I want to display in the following manner
> value = 20.00
The problem is I have to display the value in a <span> element. I want to achieve it without using regex.
Any help would be appreciated.
Since you are using angular, you can do something like so: <span>{{value | number:2}}</span>. This should render your value parameter to 2 decimal places.
I have a html element that looks like this:
<h1 [style.font-size.em]="mysize" id="title-text" #titleText>{{ screenInfo.title }}</h1>
Where mysize is a variable that controls the font-size of the h1 tag. The h1 element's width is determined by the fontsize of the content.
I'm getting a reference to the h1 tag with
#ViewChild('titleText') titleTextElement;
If i run the following code i get the following results
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, which is the correct width.
this.mysize *= 0.9;
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, but the new width is 572px.
Can anybody explain why this does not work? I would also appreciate if someone could show how I could get the updated offSetwidth value.
The view is only updated when change detection is run.
You can invoke change detection manually like:
constructor(private cdRef:ChangeDetectorRef) {}
...
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, which is the correct width.
this.mysize *= 0.9;
this.cdRef.detectChanges();
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, but the new width is 572px.
ant it should work as expected.
I am new to use AngularJS 1.4.x .
<div class="colContainer" ng-repeat="item in betNumber" ng-style="{width:{{rowWidth(item.length)}} +'px'}">
when press AddNumber ball more then 13 ,i wish width size can resize .
This is my hope
i hope can dynamic change div width size ,how to let it work fine ???
This is my hope http://plnkr.co/edit/t8bBjE?p=preview
Change your ng-style value to
{width:rowWidth(item.length) +'px'}. That should work.
The ng-style directive will evaluate the whole object, which means it will use the $parse method to evaluate the expression. So you don't have to use double curly braces.