Menu
Trying to use a directive with an ng-show statement in it. Basically it checks against the value of a string which is the status_p1 property in my 'names' jsonarray:
ng-show="name.status_p1==working"
The directive is defined as this:
app.directive('radioButton',function(){
return {
restrict: 'E',
replace: 'true',
template: '<table border="2px">' +
'<tr><td>{{name.name}}</td><td>Working</td><td><img src="http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/256/cross_icon.jpg" alt="img1" id="imgworking" ng-show="name.status_p1!=working"><img src="http://png-1.findicons.com/files/icons/2198/dark_glass/128/camera_test.png" alt="img2" ng-show="name.status_p1==working"></td></tr>' +
'</table>'
};
})
The controller+ namesarray in my main page looks like this:
app.controller('MainCtrl', function($scope) {
$scope.names = [
{
name: 'couple 1',
status_p1: 'working',
status_p2: 'retired'
}
]
});
And finally the main page:
<body ng-controller="MainCtrl">
<div ng-repeat="name in names">
<radio-button></radio-button>
</div>
</body>
Currently is displays a cross where it should be displaying a check/tick. I was expecting the condition to evaluate to TRUE because the status_p1 property equals 'working'. How can I modify this ng-showstatement to make the string comparison working? plunkr link:http://plnkr.co/edit/3VdsbsSHpkNJFVnvkmOW?p=preview
474
ng-if is better in this regard. Using it in place of ng-show will prevent the heavy content from being rendered in the first place if the expression is false. However, its strength is also its weakness, because if the user hides the chart and then shows it again, the content is rendered from scratch each time.
Using attrs you are able to access the attributes defined in your html tag like <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"> So in this case you will have access to the symbol and readonly attributes.
AngularJS ng-show DirectiveThe ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option. The restrict option is typically set to: 'A' - only matches attribute name.
The expression
ng-show="name.status_p1==working"
compares name.status_p1 with a working property on the current scope, which is not defined in your case. What you need is to compare it with the literal string 'working'.
ng-show="name.status_p1=='working'";
Modified Plunkr
146
In my case, I had this:
ng-show ="authenticated == {{it.logged_in_view}} || {{it.logged_in_view == 'neutral'}}"
and had to change it to this:
ng-show ='authenticated == {{it.logged_in_view}} || {{it.logged_in_view == "neutral"}}'
I enclosed the attribute string in single quotes and the string to be compared in double quotes.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
