I have a problem with the ng-class directive : i want to dynamically add a class when the screen size is large or medium. From what i can tell the condition is not being evaluated when generating the html or something like that because in the controller i see the correct value but the needed class is not added.
$scope.deviceLocal= $rootScope.devicee;
$rootScope.$on('size-changed', function(event, args) {
$scope.deviceLocal = args.device;
});
and the html part
<label ng-class="{\'labelFloatRight\':deviceLocal == \'large\', \'labelFloatRight\':deviceLocal == \'medium\'}">
I escape the ' character because the label is inside a template formed with '.
Thanks,
Vio
The Class name is same in both cases. Change the class name according to deviceLocal value.
Related
I have an angularjs template where some of the ngModel variable are empty. They are all attached to a html element.
I am very confused as to how to create an angularjs element that all this html elements would inherit so that
if a variable is empty or does not have anything inside its content then it should display a default content.
This is what i have done currently.
<h3 ng-bind="name">Student's name</h3>
<p ng-bind="description"> More about the programme</p>
<h2 ng-bind="title">Details about the programme for the whole years</h2>
So instead of this area been empty because there is nothing there I would want it to display the default text shown.
I think it is a drirective matter but I am not really that good with it
You can apply below simple solutions-
1. Set an expression to ng-bind
<h3 ng-bind="name || 'Student\'s name'"></h3>
<p ng-bind="description || 'More about the programme'"></p>
<h2 ng-bind="title || 'Details about the programme for the whole years'"></h2>
Note: Escape character "" is added in the default text
2. Use expression as element content instead of ng-bind, but ng-bind is the preferred option.
<h3>{{name || "Student's name"}}</h3>
<p>{{description || "More about the programme"}}</p>
<h2>{{title || "Details about the programme for the whole years"}}</h2>
3. Writing getters in the Component/Controller class of the directive for all these properties.
In the getter function, you can decide to return default values as fallback when values are not to these properties.
About creating parent element/directive: even if you create a generic directive, the default values are distinct for each use case. So you will end up writing more or less similar code to set default values to new element/directive.
Well I have a directive/component/controller i.e <app-form></app-form> I am using this html page into multiple place but I want to to remove some specific field from different in place component how can I do in angularjs
In reactjs we can do like this <app-form disableField></app-form> and if disabledField then disable particular field other wise nothing to do
Again for better understanding for example we have one form having name, email and dob same form is using multiple place but at one place we are not interesting to display dob how can we disable or remove from specific place ?
please guide
You have to use bindings in your component declaration. something on the lines of:
angular.module('app').component('appForm', {
controller: 'AppFormCtrl',
templateUrl: 'app-form.html',
bindings: {
disableField: "<", // use '<' to generate input on the component
}
});
then in your app-form.html you can access the input var using the $ctrl object:
<form>
<input ng-if="$ctrl.disableField == true" type="text"/>
</form>
And the you can pass whatever value you want in the scope of your root view:
<div>
<!-- displays the form input according to the passed property's value -->
<app-form disable-field="isFieldEnabled"></app-form>
<!-- displays the form input -->
<app-form disable-field="true"></app-form>
<!-- does NOT display the form input -->
<app-form disable-field="false"></app-form>
<!-- does NOT display the form input, as disableField is evaluated an NULL in the component instance -->
<app-form></app-form>
</div>
isFieldEnabled is the property in your root controller $scope that will control the enabling / disabling of the input field in your component, but you can simply pass true or false if no logic is used.
You can attach whatever property you want, it doesn't have to be a boolean (but in this case I think it makes sense).
Also, notice that when defining the binded property 'disableField' in the Javascript environment, we use camelCase. The same property will be defined in the view / html environment using kebab-case.
You can also check the following answer to see how to generate output from the component instances:
Angular.js, how to pass value from one component to any other
I'm reviewing old classes and I try to finish the exercices I couldn't do before. This class is in Ionic1, using Angular1.
I have a directive using two parameters; the first one is an object which data are to be displayed, and the second one is a parameter to hide/show some elements in the display
Here is the view implementing the controller :
<ion-list>
<film-directive
ng-repeat="tmpMovie in myController.movieList"
movie="tmpMovie"
displayBtnAddFav="false"
></film-directive>
</ion-list>
And here is the directive construction :
const FilmDir = function(){
return {
"restrict":"E",
"scope":{
"movie" :"=",
"displayBtnAddFav" :"&"
},
"template":`
<ion-item>
<p ng-if="displayBtnAddFav">DISPLAY WHEN TRUE</p>
<p ng-if="!displayBtnAddFav">DISPLAY WHEN FALSE</p>
</ion-item>`,
"controller":function($scope){
//TODO
}
}
};
All the files are correctly referenced. My directive is displayed in the view, but the "displayBtnAddFav" value isn't interpreted correctly. The "DISPLAY WHEN TRUE" is always displayed
I tried :
calling the directive with displayBtnAddFav="false"
calling the directive with displayBtnAddFav=false
replacing the boolean value by a string ("a" or "b") and using ng-if="displayBtnAddFav==='a'"
Nothing works as intended and I seem to be out of options. Would any of you see what I'm doing wrong?
So I think the issue here is the scope binding:
Per the angular documentation: & bindings are ideal for binding callback functions to directive behaviors. (https://docs.angularjs.org/guide/directive)
Different bindings are ideal for different scenarios. Try changing it from a & to an =. This should allow for angular to interpret the boolean your trying to pass correctly.
const FilmDir = function(){
return {
"restrict":"E",
"scope":{
"movie" :"=",
"displayBtnAddFav" :"="
},
"template":`
<ion-item>
<p ng-if="displayBtnAddFav">DISPLAY WHEN TRUE</p>
<p ng-if="!displayBtnAddFav">DISPLAY WHEN FALSE</p>
</ion-item>`,
"controller":function($scope){
//TODO
}
}
};
Thanks a lot Kyle for your input.
After some more tests, it appears you're right despite what the doc was telling me.
Another crucial point I realized it that the directive doesn't like "camelCase" arguments : I had to change the displayBtnAddFav to displaybtnaddfav for it to work properly.
I was expecting ng-class to at least do what a simple class does i.e. apply a css property. In the plunker example, if the replace ng-class with class, it works and I get the indent.
i.e. ng-class="indentLeft" doesn't work but class="indentLeft" does. What am I missing ?
See a simple plunker here: http://plnkr.co/edit/moLu0BmgEYVm3xFQDcw8?p=preview
ngClass requires an expression to evaluate.
ng-class="{'indentLeft' : (item == true)}"
The json structure is property name in '' is the class you want to apply and that property value detracted if it should be applied via true/false
String Expression
When you do this, ng-class="indentLeft" angularjs doesn't know that it is a string and most likely is trying to evaluate it from the scope.
If you wrap the property in '' and make it a string literal the plunker should work correctly
ng-class="\'indentLeft\'"
Updated plnkr
I have the component and have a problem setting the css class to it.
I want it to always have a class of "box", then to have additional classes specified by the directive "class" argument and one conditional class "mini".
Conceptually what I want to achieve is something like this:
<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>
The problem is that when I set the class html attribute, the ng-class attribute is omitted.
How to make my example work without changing the controller? Is it even possible, or should I set the class in the controller instead (which I wish to avoid)?
A quick solution would be define the box class inside ng-class attribute:
<div data-ng-class="{mini: !isMaximized, box: true}"></div>
If you want to include a scope variable as a class, you can't use ng-class:
<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">
Angular expressions do not support the ternary operator, but it can be emulated like this:
condition && (answer if true) || (answer if false)
I needed multiple classes where one was $scope derived and others were literal classes. Thanks to the hint from Andre, below worked for me.
<h2 class="{{workStream.LatestBuildStatus}}"
ng-class="{'expandedIcon':workStream.isVisible, 'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>
Edit: for newer versions of Angular see Nitins answer as it is the best one atm
For me, this worked (I'm working on AngularJS v1.2.14 at the moment so I guess 1.2.X+ should support this, not sure about the earlier versions):
<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>
I replaced your {{class}} with {{myScopedObj.classesToAdd}} to show that any scoped variable or even a bit more complex object can be used this way.
So, every DIV element crated this way will have "box" class and any class contained within myScopedObj.classesToAdd (useful when using ng-repeat and every element in the array needs to have a different class applied), and it will have the "mini" class if !isMaximized.
Another way to do this without double curly braces and includes scope variables, tested with angular v1.2+.
<div ng-class="['box',
aClass,
{true:'large': false: 'mini'}[isMaximized]]"></div>
It's also rather nice because the variable can use different types as a index without increasing complexity using ternaries. It can also remove any need for negations ;)
Here is a fiddle link
You can use simple expression given below
ng-class="{'active' : itemCount, 'activemenu' : showCart}"