i have a div with the name #taget
<div class="col-md-10 col-xs-10">
<div class="quantity-buttons" #target>
....
in the code i am refrenceing it like this
#ViewChild('target') target;
on a button click i am trying to set the scrollTop property to some value.
this.target.nativeElement.scrollTop = 200;
but it has no effect. I can see scrollTop = 0 before and after the above line of code is executed.
Try this
#ViewChild('target') public myScrollContainer: ElementRef;
and then,
let nativeElement = this.myScrollContainer.nativeElement;
nativeElement.scrollTop = 200;
Related
I have such an div element:
<div className="rate" >
<mark className="rate-mark"> Rate : </mark>
<mark className="val-mark" style={{color}}> {rate}</mark>
</div>
where the color is a hook:
var green = "#0cb87f";
var red = "#ce2020";
const [color,setColor] = useState(green)
I'm trying to dynamically change the color like this :
if (response.getRate() < rate){
setColor(red)
}else{
setColor(green)
}
But in my case it turns out that the light is always green.I think the mark page element is just never updated.How can this be made to work?
I'm trying to make a virtual scroll and whenever the user scrolls down I need to add a negative top equal to the container height to each row. But of course this top property can vary depending of some factors like the user's screen resolution or browser window size.
So far this is what I got:
<div class="container" id="my-container">
<!--If it has the class row-scrolled the top property is applied-->
<div ng-repeat="(row) in virtualCollection"
ng-class="{'row-scrolled': controller.isScrolled}">
<!-- row properties -->
</div>
</div>
I have also thought about the idea of using ng-style but would override any style from my .css file.
Is there anyway to get the size/property of a DOM element...
// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
And then use it in an css?
// css
.row-scrolled {
top: cssProperty;
}
You can't pass variables from javascript to CSS since CSS is not a programming language but a style sheet language.
What you can do is manipulating specific elements with javascript.
Based on your code here is an example:
// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $$rowScrolled = document.querySelectorAll(".row-scrolled");
if ($$rowScrolled && $$rowScrolled.length > 0) {
for (var i = 0; i < $$rowScrolled.length; i++) {
var $rowScrolled = $$rowScrolled[i];
$rowScrolled.style.top = cssProperty;
}
}
With jQuery:
// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $rowScrolled = $(".row-scrolled");
if ($rowScrolled && $rowScrolled.length > 0) {
$rowScrolled.css("top", cssProperty);
}
You can not pass a variable to the CSS.
What you can do though is add the property directly using the ng-style tag:
<div class="container" id="my-container">
<!--If it has the class row-scrolled the top property is applied-->
<div ng-repeat="(row) in virtualCollection"
ng-style="{'top': controller.cssProperty}">
<!-- row properties -->
</div>
I am preparing charts on repeat.
I have applied drag properties to <div>, I am able to drag the div element but if multiple charts are added to that div on ng-repeat it is misbehaving, with only the first div dragging if I drag any other chart.
This is my code (I am using Dev Extreme to prepare charts using Angularjs)
<div style="background-color:white;" id="myElement" dx-dragenter="dragEnter($event)" dx-dragleave="dragLeave($event)" >
<div ng-repeat="chart in FinalPieData" id="innerElement" dx-drag="dragged($event)" dx-dragstart="dragStarted($event)" dx-dragend="dragStopped($event)">
<div class="col-lg-6" ng-repeat="pie in chart" ng-mouseleave="HideTitlePieOnLeave()">
<div id="ibtMulPie" class="ibox float-e-margins">
<div ng-mouseover="ShowTitlePie(pie)">
<div class="demo-container">
<div id="pie" dx-pie-chart="pie"></div>
</div>
</div>
</div>
</div>
</div>
</div>
drag code JS
//pie
$scope.dragStarted = function () {
$("#innerElement").css("background-color", draggedColor);
initialTop = parseInt($("#innerElement").css("top"));
initialLeft = parseInt($("#innerElement").css("left"));
initialPointerY = arguments[0].clientY;
initialPointerX = arguments[0].clientX;
};
$scope.dragged = function () {
$("#innerElement").css("top", initialTop + arguments[0].clientY - initialPointerY);
$("#innerElement").css("left", initialLeft + arguments[0].clientX - initialPointerX);
};
$scope.dragStopped = function () {
$("#innerElement").css("background-color", "green");
};
$scope.dragEnter = function () {
draggedColor = "red";
$("#innerElement").css("background-color", draggedColor);
};
$scope.dragLeave = function () {
draggedColor = "yellow";
$("#innerElement").css("background-color", draggedColor);
};
The repeated divs all have the same id.
You can make all id's unique like so:
ng-repeat="chart in FinalPieData track by $index" id="innerElement{{$index}}"
Now you can fetch the element using the event that you pass into the drag functions, or pass the id in as well and use that in your selector like so:
In html
dx-dragstart="dragStarted($event, $index)"
And in controller
$scope.dragStarted = function (event, index) {
var elementid = "#innerElement" + index;
$(elementid).css("background-color", draggedColor);
initialTop = parseInt($(elementid).css("top"));
initialLeft = parseInt($(elementid).css("left"));
initialPointerY = arguments[0].clientY;
initialPointerX = arguments[0].clientX;
};
Inside my HTML file:
<rating ng-show = "onerate =='null'" readonly="isReadOnly" ng-model="newRate.rating" max="max" class="assertive" ng-click="addRating('{{singleRecipe[0].recipe_id}}')" >
</rating>
I want that whenever I click once it will never be clickable.
Inside my controller in my Javascript file:
$scope.rate = 1;
$scope.max = 5;
$scope.isReadonly = false;
$scope.newRate = {};
$scope.newRate.userID = $scope.userdata.user_id;
$scope.addRating = function(recipe_id){
$scope.newRate.recipeID = recipe_id;
RatingList.add($scope.newRate);
console.log($scope.newRate);
$scope.isReadonly = true;
}
You should use ng-readonly docs here
Keep in mind that readonly attribute only works for input objects, if you are creating some element that responds to click, you will have to handle this differently.
What you really want is to change your click method:
$scope.addRating = function(recipe_id){
if (!$scope.isReadonly)
{
$scope.newRate.recipeID = recipe_id;
RatingList.add($scope.newRate);
console.log($scope.newRate);
$scope.isReadonly = true;
}
}
You use ng-class with $scope.isReadonly to dynamically add classes to visually show that the element is no longer clickable if you wanted to. More info here
Use ng-readonly
https://docs.angularjs.org/api/ng/directive/ngReadonly
You now have only readonly
If I have:
<div id="abc" data-ng-show="abc.visible">xxx</div>
and in javascript:
$scope.abc.visible = true;
var modal = document.getElementById('abc');
var modal_width = parseInt(modal.width, 10)
var modal_height = parseInt(modal.height, 10)
var abc = $('#abc').width();
How can I now get the width of the div straight after setting the visible to true? I tried the above but it does not seem to be available to me.
Note that modal.width and modal.height both show here as undefined
Yes there is a delay. You need to watch $scope.abc.visible for changes. I've created a plunker to show you what I mean: http://plnkr.co/edit/zmPPcHVkc6RbdQvYRBtX?p=preview.