I would like to style a text by its length. So true is red and false is green. I use ng-class with expression. It's possible to change the css after a user click?
This is a plunkr: http://plnkr.co/edit/ndCqpZaALfOEiYieepcn?p=preview
<div>
<p ng-class="{true:'green',false:'red'}[name.length>3 && toggle]">{{name}}</p>
<p><b>Length: </b> {{name.length}} character(s)</p>
<button ng-click="toggle=!toggle">Toggle class</button>
</div>
Initially, toggle is undefined, which I think is causing an error when evaluating the expression [name.length>3 && toggle]. Then when you click the button, the opposite of undefined is true, so then your toggle starts working as you expect.
To fix this, you can use ng-init to evaluate an expression before the views are processed.
For example, if you change your div to be:
<div ng-init="toggle = true">
then the class starts out as green initially.
Related
I have a ng-repeat that loops over 9 divs, each one has a different color.
When the user clicks on one div, its color it's gonna be the background color of a section.
I'm trying to do this:
The array that gets repeated is structured like this:
interface colorBoxes {
color: string;
isSelected: boolean;
}
in the view:
<div ng-repeat="s in vm.colorBoxes track by $index">
<div class="pointer" ng-click="w.backgroundColor = s.color; vm.pickColor(s, $index)" ng-style='{"background-color": s.color}'>
<i ng-show="vm.isColorSelected($index) === true" class="fa fa-check fa-1x checkOnSelectedLegend"></i>
</div>
</div>
in the controller:
pickColor(array: any, index: number) {
for(var i = 0; i<=this.colorBoxes.length; i++) {
this.colorBoxes[i].isSelected = false;
}
array[index].isSelected = true;
}
I use this function so when you click on a DIV, its variable: isSelected gets true, and all the other DIV's have theirs set to false.
I use this variable in the view with a ng-show, to show a check mark on the DIV that is currently selected, but this isn't working, below the function I put in that ng-show
isColorSelected(index:number):boolean {
return this.colorBoxes[index].isSelected
}
What am I doing wrong?
To summarize, I want that when you click on a box, its color string gets applied to another element (that is working correctly with my code), then, that box need to have a check mark appear on top of it, I tried with the above functions, by setting the isSelected var to true when clicked, but it doesnt work.
I'm pretty sure the problem is that angular isn't checking for changes in that ng-show, I just don't know exactly how to make it check for changes, and maybe there is a cleaner way to obtain what I'm trying to do!
Thank you
addded fiddle: http://jsfiddle.net/7zymp2gq/1/
Ok, here you have your code fixed and working:
http://jsfiddle.net/7zymp2gq/4/
Basically there were 2 things wrong with the function $scope.pickColor:
The loop was entering into not existing fields, I have changed the <= with a <
It was updating array[index], and it should be updating $scope.colorBoxes[index]
Instead of using function at ng-show you can use the isSelected property:
<div ng-app="app" ng-controller="Ctrl">
<div class="class1" ng-repeat="s in colorBoxes track by $index">
<div class="pointer class2" ng-click="pickColor(colorBoxes,$index);" ng-init="lastselected=s.isSelected?$index:null" ng-style='{"background-color": s.color}'>
<i ng-if="s.isSelected" class="fa fa-check fa-1x checkOnSelectedLegend"></i>
</div>
</div>
<div class="changeColor" ng-style='{"background-color": chosenColor}'></div>
</div>
Check this demo.
In my angular app i have a flag icon using the code:
<i ng-click="detail.flag()" class="fi-flag"></i>
I also have a boolean variable that I'd like to use to disable this.
I've tried the following to no avail:
<i ng-disabled="showDuplicate" ng-click="detail.flag()" class="fi-flag"></i>
and
<div ng-disabled="showDuplicate"><i ng-click="detail.flag()" class="fi-flag"></i></div>
Any ideas why they dont work?
Thanks.
ngDisabled - This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.
Elements that can receive the disabled attribute include <button>, <input>, <textarea>, <optgroup>, <option> and <fieldset>.
That's why it won't work on <i> (or <div>) element.
DEMO
As others mentioned, ng-disabled is specific for some tags only. I assume that you want to disable clicking on the element when your variable is false, you can do it this way
<i ng-click="showDuplicate && detail.flag()" class="fi-flag"></i>
This is called short circuiting an expression, if showDuplicate is true, the next term will be evaluated which is detail.flag() if it is false, it will not continue evaluating the next term since false && true is still false so it will not bother evaluating the next terms
Though you should be styling the element if you disable something, so you should add a class that says it is disabled and style it accordingly
<i ng-class='{disabled: showDuplicate}' ng-click="showDuplicate && detail.flag()" class="fi-flag"></i>
in your css:
.disabled{
cursor: not-allowed;
opacity: 0.8 /* ? it's up to you how you want to style it*/
}
The answer is correct, you cannot use ng-disable with icon html tag.
I tried somthing like that:
<div ng-controller="DemoController as detail">
<i ng-disabled="detail.showDuplicate" ng-click="detail.flag()" class="fa fa-flag">test</i>
<button ng-disabled="detail.showDuplicate" ng-click="detail.flag()" class="fa fa-flag"></button>
</div>
https://plnkr.co/edit/0DBXJ4o9hmdtep8PM4Wc?p=catalogue
I hope it helps.
I have a directive template with the following code
<div class="colorpicker">
<div>Chosen color</div>
<div class="color_swatch" style="background-color: {{ngModel}}"> </div>
<div class="clearfix"></div>
<div>Standard colors</div>
<div class="color_squares">
<div ng-repeat="color in colorList">{{color.trim() == ngModel.trim()}} //does not update
<div class="color_swatch" style="background-color: {{ color }};"></div>
</div>
</div>
<div class="clearfix"></div>
In the directive, I update the ngmodel using the below code to the color that was clicked - the div next to "chosen color" is updated with the selected color.
But, the expression "{{color.trim() == ngModel.trim()}}" always amounts to false.
{{color.trim() == ngModel.trim()}}
I have debugged the code and the values are exactly the same.
What I am missing?
This is probably because your variable is precisely named 'ngModel' see that article for more explanation : http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/
To resume this article : never use raw fields use always a dot. So in your scope change
$scope.ngModel
By
$scope.data.ngModel
And in your html change ngModel by data.ngModel.
When using dot you may have some undefined error, this is because you have to initialize the object :
$scope.data={};
Of course you can jsut rename your variable, but you may still have a problem with others directives.
I solved this by removing curly braces around color and using ng-style
<div class="color_swatch" id="colorpicker_selected_color" ng-style="{'background-color': selectedColor}" > </div>
If I'm having this code below. How can I render the div(#divToRender) when clicking the button. I know there is angularJs code for hide/show. But I dont want it to be rendered until I click my button. Is that possible? //Thanks
<button>Render my div!</button
<div id="divToRender">
Some text
</div>
You could use ng-if, it will render the element only if the expression is evaluated to true.
<button ng-click="showMyDiv = true">Render my div!</button>
<div id="divToRender" ng-if="showMyDiv">
Some text
</div>
Example Plunker: http://plnkr.co/edit/jtasEuhNCghprsGZjSrh?p=preview
Also see ngIf documentation.
I need to show and hide a div. I do it by putting true of false values into the ng-show
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingRoof}}">
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingObs}}">
But this is what i get:
<div id="roofPropertie" class="drawingToolPropertie ng-hide" ng-hide="true">
<div id="ObstaclePropertie" class="drawingToolPropertie ng-hide" ng-hide="false">
values chage but that ng-hide class stays and as result those divs are always hidden. How do i fix this ? Why is this working like this ? I'm not using jquery.
ng-show/ng-hide uses no double brackets
ng-show="drawingMods.settingRoof"