I am looking for one line syntax for this:
<span ng-if="value">{{value}}</span>
Maybe something like:
<span ng-bind-if="value"></span>
If saving characters is important I would recommend creating a custom directive and handle the logic internally.
<span my-hide-if-undefined="value"></span>
Related
I'm using angular-translate package. It provides developers with different things. One thing is internal interpolation so you are able to use dynamic data inside translation strings. Or even angular directives.
Assume we have greeting.
'Hello {{name}}!'
That is used in template like that:
<h3 translate="greeting" translate-values="vm.user" translate-compile></h3>
But user.name maybe empty. In this case I'd like to see "Hello anonymous!". I'm trying to use ng-if but it does not work in expected way:
'greeting': 'Hello <span ng-if="!name">anonymous</span>{{name}}!'
It will output "Hello anonymousJack!" like if name is empty and is not empty at the same time.
Why I don't want to inject ng-if into template instead of translation? Because depending on language there will be different position of name part. So I'd like to avoid unclear decomposition like
<span translate="greeting_1"></span>
<span ng-if="vm.user.name" bind="vm.user.name"></span>
<span ng-if="!vm.user.name" translate="greeting_anomymous"></span>
<span translate="greeting_2"></span>
This looks unclear and confusing. Especially in more complex cases.
I've found all data passed through translate-values is available in nested variable interpolateParams. So next will work:
'greeting': 'Hello <span ng-if="!interpolateParams.name">anonymous</span>{{name}}!'
I'm having trouble using one way binding in directives with an isolate scope.
If I use an equal sign for two-way binding, and use the data like so: {{d.name}}, it works.
If I use an # sign, it doesn't work. If I use an equal sign and use the data like so: {{::d.name}}, it fails also.
You can see my full example at this plunker: http://plnkr.co/edit/8bUl8pZSV8Ryru6GDq2M?p=preview
Can someone please help me understand what's happening here? Thanks.
The one-way binding syntax you are trying to use, has been introduced since Angular 1.3.
In your demo you are using version 1.2.25.
You must change the script link:
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.2.25"></script>
The problem with the second directive, instead, is that the # is not a one-way binding, it simply takes the attribute as text.
To use it like you would, so you need to interpolate the text before passing it to the directive, like this
<h3>Directive 2</h3>
<p ng-repeat="d in data">
<dir2 d="{{d.name}}"></dir2>
</p>
DEMO
I want to do a two way data-binding from my view to controller. is it possible to do it using ng-model? it displays undefined in the controller though.
My code is something like:
<span ng-model="xyz">${user.group}</span>
and in my controller:
console.log($scope.xyz); //returns undefined.
What is the use of ng-model if I cannot use it this way?
Can anyone suggest a workaround for this?
Your problem is that the ng-model must be bound to an actual value. Spans do not have a value associated to them like inputs do so your $scope.xyz would never be set unless you set it in the scope. Even after that it would not do anything with the span. You also need double {{ and }} around everything, not single {}. You also do not need the $ symbol in the html.
Try :
<input type="text" ng-model="xyz" /> <span> {{xyz}} </span>
Got it working, I was missing to pass the argument to this function as a string, I simply had to do this using ng-bind on span tag like this:
ng-bind="getGp('${user.group}')"
Thanks everyone.
I have tried to do the following:
<accordion-heading ng-click="doSomething(); isopen=!isopen">
Should this work? or is it not possible to string there call together?
ng-click="doThis(param); doThat(param);"
I just need pointed in the right direction :-)
EDIT:
this:
ng-click="doThis(param); doThat(param);"
works as expected, I think it is:
isopen=!isopen
that is causing the problem, I realise I didn't say this initially.
I go around this by adding an extra div into the accordion heading, like this:
<accordion-heading ng-click="isopen=!isopen">
<div ng-click="showMainView()">
<i class="glyphicon" ng-class="{'glyphicon glyphicon-minus': isopen, 'glyphicon glyphicon-plus': !isopen}"></i>
{{item.model}}<br>{{item.model_engine}}
</div>
</accordion-heading>
possible !! possible !! possible !! possible !! possible
You can call multiple functions with ';'
See here
Using ng-click to call two different functions
How to add many functions in ONE ng-click?
How to use ng-click with multiple expressions?
It works:
http://plnkr.co/edit/fwSdBT3NIBrlk80aTgaB?p=preview
However be careful not to do too much logic in there. You should put the logic in the controller and only call it from the view. (isopen = !open for example doesn't belong on the view)
I have no idea how to pre-populate an ng-model in this circumstance that I have to use ngBind. I tried ng-init, but it's not working.
<h6 ng-show="isOwner" ng-bind="currentMagazine.magazine_name"
contenteditable ng-model="currentMagazine.magazine_name"
ng-change="update()"></h6>
I have a seperate directive that binds contenteditable attributes to ngModelController.
The problem now is whenever I update the model, ng-bind will jump out and refresh the div element, resulting in the cursur going back to the beginning of the text, which makes it impossible for any user to type.
I tried ng-init in a fashion like this:
<div ng-init="magazineName = currentMagazine.magazine_name">
<h6 ng-show="isOwner"
contenteditable ng-model="magazineName"
ng-change="update()"></h6>
</div>
It's not working. If I don't use ng-bind, then no text will show up.
Also I notice it might be related to this problem, when I type with space or delete key, they are escaped into HTML entities...so you get result like this:
Hopefully both of my problems can be solved! Thank you (it's a very frustrating day)!
In your app.js do this:
$scope.magazineName = $scope.currentMagazine.magazine_name;
In your HTML do something like this:
<input
ng-show="isOwner"
contenteditable
ng-change="update()"/>
or
<h6 ng-show="isOwner"
contenteditable
ng-model="currentMagazine.magazine_name"
ng-change="update()">
{{currentMagazine.magazine_name}}
</h6>
... though perhaps not, it's a bit difficult to gauge without seeing it... please make a jsfiddle or plunkr if you'd like to get more eyes on it.
If you're just trying to make some large text that is still editable and bound to the model it may be easier to just style an input for your needs.
Decided to play with contenteditbale since it's chance for me to learn something too... I can't seem to recreate the issue though:
http://jsfiddle.net/VSJQX/
I saw after doing this it wasn't updating the model, found another SO post that resolves that and included the changes here:
http://jsfiddle.net/VSJQX/2/