How can I do an ng-hide inline expression like this:
ng-hide="userType!=user"
?
what is your userType ?? a string ? and you want to hide if != 'user'
ng-hide="userType!='user'"
please check this answer about ng-hide/ng-show
The ngHide directive would not work on an inline expression. The inline expression is evaluated and then the result is injected in the HTML element containing the expression.
If the inline expression is just plain text, you could try the following:
{{ userType != user ? "" : value }}
or if you do not want an empty string you could also use "null"
{{ userType != user ? null : value }}
Related
I need to add multiple condition in the ng-style.
How can I do this?
I tried below code but it is not working.
ng-style="ifTrue?'opacity:1;' : 'ifTrue? 'opacity: 1;': 'opacity: 0.5;''"
You can simply separate your conditions with ",".
Something like this:
ng-style="{ 'background-color': '#ff0', color: 'red' }"
See this example: http://jsbin.com/fabisepede/edit?html,output
Always remember to put quotes on "dashed" word ('background-color').
For the value you can also use variables defined in your controller and assign the style conditionally, but for that i prefer ng-class.
This worked for me
ng-style="IfCondition1 ? checkAnotherCondition && {'color':'red'} : {'color': 'green','font-weight':'bolder'}"
It checks my first condition and if true then it checks another condition and if that is true it makes it red. If the first condition is false then the last style is applied.
You could use something like
ng-style="condition && { /*properties*/ } || condition2 && { /*other properties*/ }"
ng-style="ifTrue ? 'opacity:1;' : 'opacity: 0.5;'
ng-style=(condition) ? 'run this if true' : 'run this if false'
Why dont use something like this?
how to set for three condition
example:
if data is === 1 then red
if data is === 2 then blue
else pink
#mario - you can use something like
[ngStyle]="{'property-to-set': (if_1) ? (true_block_1) : ((if_2) ? (true_block_2) : (other_true))}
Assuming that I have an expression-like string in my scope
$scope.expressionString = 'model.key == "anything"'
I want to use this string as an expression in view, can I do that?
In view, I will have something like
<div ng-if="expressionString"></div> but of course, expressionString should be something else instead.
I appreciate any help. Cheers!
You can use $eval to evaluate your expression , there are two ways to do it in your case
Solution 1
<div ng-if="$eval(expressionString)"></div>
Solution 2
In the controller store the evaluated value of the expression like below
$scope.expressionString = $scope.$eval('model.key == "anything"')
and then in the view simply use it without using $eval in the view
<div ng-if="expressionString"></div>
I found the answer, made a parse filter to parse the string and assign it a scope
angular.module('zehitomo')
.filter('parse', function ($parse) {
return function (expression, scope) {
return $parse(expression)(scope);
};
});
And in view
ng-if="expressionString | parse:this"
You cannot use global variables (or functions) in Angular expressions. Angular expressions are just attributes, so are strings and not Javascript code.
Please see this stackoverflow answer once
Although, you can achieve it using a function instead of a variable:
$scope.expressionString = function(toCompare) {
return $scope.model.key == toCompare;
}
and in your view:
<div ng-if="expressionString('anything')"></div>
This code is inside ng-repeat loop. The expression is not evaluating inside browser and the entire statement is their in browser also.
<i ng-class="'icon-ok' : student.is_passed == 'passed', 'icon-remove': student.is_passed == 'failed'"></i>
You need to put your expression inside curly braces "{}"
<i ng-class="{'icon-ok' : (student.is_passed == 'passed'), 'icon-remove': (student.is_passed == 'failed')}"></i>
this works:
{{ boolean ? String1 : String2 }}
this doesn't:
{{ boolean ? String1 | weirdoFilter : String2 | weirdoFilter }}
How can I apply filters to ternary expressions ?
edit: Maybe single quotes?
You can do it with parenthesis :
{{ (boolean ? String1 : String2) | weirdoFilter }}
... if you make a function in your view, then it becomes easier to do logic in your controller using real life javascript (instead of more limited angular expressions)...
{{ mySpecificThing(String1,String2) }}
... then in controller ...
$scope.mySpecificThing = function(item1, item2){
return boolean ? $filter('weirdoFilter')(item1) : $filter('weirdoFilter')(item2);
}
As a general pattern, I think it is favourable to always keep your logic away from your templates.
I have my checkbox input that sets the "true" value dynamically based on a variable trueVal, which is a string.
<input ng-model="foo" ng-true-value="'{{trueVal}}'">
For example, for trueVal = "something", foo === "something" when the checkbox is checked.
This works except in the case when trueVal equals to a string with a single quote in it: Customer didn't understand. In this case, there is an error:
Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 27-28 ['] in expression ['Customer didn't understand'].
I can't strip the single quotes because the string should be set as-is to foo.
Broader context:
I'm creating a group of checkboxes based on a list of options that I get from the back-end:
<div ng-repeat="(key,option) in options">
<input type="checkbox"
ng-model="foo[key]"
ng-true-value="'{{option.trueVal}}'"
ng-false-value="null">
</div>
So, given:
options = {
0: {trueVal: "Customer was late"},
1: {trueVal: "Customer didn't understand"}
};
I expect to see:
foo = {
1: "Customer didn't understand"
};
if the second box is checked.
The short version, ng-true-val expects a constant and is being passed the following expression as a parameter: 'Customer didn't understand' for evaluation, which is malformed because of un-terminated single quote.
The simple (but somewhat ugly) approach would be to replace ' with \' in the View (this doesn't change the actual value - just encodes it):
<input type="checkbox" ng-model="foo"
ng-true-value="'{{trueVal.replace('\'', '\\\'')}}'"
ng-false-value="null">
The better approach is probably using ng-change:
<input type="checkbox" ng-model="t"
ng-change="foo = t ? trueVal : null">
Longer version
Under the covers ng-true-value calls $parse service: var parseFn = $parse(expression), and expects parseFn.constant === true. The latter is only true if the expression is a constant:
expression = 'string'; // string literal
expression = '5' // number literal
expression = {v: 'string'} // object literal with a constant
expression = 'foo' + 'bar'; // expression that evaluates to a constant
In your case you need to take the variable trueVal, interpolate it to a value {{trueVal}}, to become part of an expression '{{trueVal}}' that ultimately will be evaluated as explained above.
This is why substitution of ' works to \', because it escapes the singles quotes as if you have written the expression directly:
ng-true-value="'Customer didn\'t understand'"
If you are certain that you won't have double quotes (") in your values for options, you could also simply reverse the order of quotes without the need to do replace:
ng-true-value='"{{trueVal}}"`
This will, of course, fail for the same reason if trueVal value had double quotes: something with "quotes".
Try this.
In Markup
<input type="checkbox" ng-model="dummyModel" ng-model-options="{getterSetter: true}">
In Controller
var trueValue = "my true' value";
var falseValue = false;
var _model;
$scope.dummyModel = function (val) {
if (angular.isDefined(val)) {
_model = val ? trueValue : falseValue
}
return _model === trueValue;
}
Use _model to submit to the database.