I want to set the placeholder of an editable text area based on a value set in the controller. The placeholder text contains smart quotes. When I do this it works:
<div>
<p editable-textarea="vm.address" e-rows="8" e-name="address" e-ng-model="vm.address" e-ng-maxlength="vm.addressLimit"
e-maxlength="{{vm.addressLimit}}" e-placeholder="They’re">{{vm.address || '(empty)'}} </p>
</div>
This is displayed: "They’re".
However if I set e-placeholder to value defined in my controller it doesn't. For example if the controller has
vm.addressPlaceholder = 'They’re';
and the view
<div>
<p editable-textarea="vm.address" e-rows="8" e-name="address" e-ng-model="vm.address" e-ng-maxlength="vm.addressLimit"
e-maxlength="{{vm.addressLimit}}" e-placeholder="{{vm.addressPlaceholder}}">{{vm.address || '(empty)'}} </p>
</div>
They’re is displayed. Any idea on what I am doing wrong.
Thanks in advance.
Try putting your value in quotes when you set it...
vm.addressPlaceholder = 'They’re'
and then remove the curly braces and set it in the markup like so
e-placeholder="vm.addressPlaceholder"
Issue resolved. The problem had to do with the encoding. The javascript file was saved as ANSI. After changing the encoding to UTF-8, problem resolved.
Related
We have an address form and would like to set a default value of x to the input phone.
<div
class="form-group ms-mb-xs"
data-ng-if="field.settings.display_type=='phone'"
>
<label>
{{field.label|msTranslate}}
</label>
<input
type="tel"
id="phone"
class="form-control"
data-ng-model="fields[field.name]"
data-ng-intl-tel-input
data-ng-init="fields[phone]=12345678"
/>
</div>
I have used data-ng-init and ng-init and tried putting a default value but it doesn't show on the front-end. Also tried value="12345678" but didn't work. Have also put the numbers in single quotes but still didn't work.
Thanks in advance.
There are two ways you can do this.
Initialize your model variable with the value you need to show.
Use ng-init to execute code so that your model variable will be given a value.
It looks that you have tried the second option data-ng-init="fields[phone]=12345678"
The only reason why the option 2 doesn't work is that the controller updates the fields[field.name] with a blank value.
So, make sure you give a default value to the model variable if the intended value is blank. Something like this:
fields[field.name] = fromDB || 'a default value'
Actually I'm confused between when to use {{ }} when using angular directives and when to not to use {{ }}
For example:
<div data-ng-init="isHidden=false">
<div data-ng-show="isHidden">
...
</div>
</div>
and
<div data-ng-init="isHidden=false">
<div data-ng-show="{{isHidden}}">
...
</div>
</div>
I'm confused between these syntax ? What are the differences between those? And when to use what? Thanks in advance :)
There is no difference except the "look" u need to use the {{value}} syntax in case you want to write data anywhere in your html body
<div>{{value}}</div>
It's all explained here: Difference between double and single curly brace in angular JS?
For quick answer:
{{}} are Angular expressions and come quite handy when you wish to
write stuff to HTML
Don't use these at a place that is already an expression!
For instance, the directive ngClick treats anything written in between
the quotes as an expression
<div data-ng-init="isHidden=false">
<div data-ng-show="isHidden">
...
</div>
</div>
In This Situation data-ng-show = false , Takes From data-ng-init As Statically,if You Have Given true Then It Returns True .
But Here
<div data-ng-init="isHidden=false">
<div data-ng-show="{{isHidden}}">
...
</div>
{{}} Called As Expressions In Angular One Of The Most Important Concept
It Directly Evaluate If isHidden = true Or False Based On Any Condition Written In Your App.js File .
Example:
<div data-ng-init="isHidden=YourVariable">
<div data-ng-show="{{isHidden}}">
...
</div>
if(YourVariable == true){
Do Somthing
}
else{
Do Something
}
If you are asking when to use {{}} while assigning value to a attribute and when not.
It depends on the binding types of directive. '#' or '='
So here, you have to use:
data-ng-show="{{isHidden}}" if the binding type of directive scope data-ng-show is '#', that mean the data-ng-show will be expecting a string value. So in this case if you keep data-ng-show="isHidden" it will take data-ng-show's value as 'isHidden', but data-ng-show="{{isHidden}}" will take the value of the $scope.isHidden and assign to data-ng-show.
Now if the binding type of directive scope data-ng-show is '=', that means the data-ng-show will be expecting a value from a scope. So data-ng-show="isHidden" itself will take the value of he $scope.isHidden and assign to data-ng-show.
Note: all the default HTML attributes expect a string so you have to use {{}} for default HTML attributes.
There is no as such major difference unless one uses them in the DOM for the value.
When one uses the following:
<div data-ng-show="isHidden">
then, expression is evaluated and on the basis of it respective value, the ng-show either hides or displays the div. But the value of the isHidden cannot be seen, when one inspects the HTML using the browser developer tool.
When one uses the following:
<div data-ng-show="{{isHidden}}">
In this case, the value of the isHidden can be seen from the developer tools, and the rest of the expression does evaluates the same as that of (1).
I have this in my template:
<div ng-repeat="item in mainCtrl.items" class="item">
<h4 ng-bind="item.title"><small ng-bind="item.pub_date"><strong></strong></small></h4>
<p ng-bind="item.content"></p>
</div>
the item.content and item.content shows respectively. However, the item.pub_date don't show the value in there. I get empty portion at where the date should be in my rendered template.
Using Batarang, I realized the pub_date value shows in the template, but doesn't render or what.
This is how it appears when I look it up in batarang
pub_date: 2014-12-05T18:27:30.939Z
Do I need to add a date filter to make it work? I'm not exposing the value within the pub_date item properly or? Thanks
That is because your h4 tag wrapping small tag which overrides its content. The ngBind directive basically replaces the existing content.
Either move small out of h4 or use double curly notation for the title as:
<h4>{{item.title}}<small ng-bind="item.pub_date"><strong></strong></small></h4>
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.
The Select tag I am using in conjunction with ng-switch does not properly display nor function properly after being set once.
<select ng-model="visuals" ng-options="visual for visual in visuals">
See JSFiddle:
http://jsfiddle.net/timothybone/UaFuc/3/
Thanks in advance!
:D
You should not bind visuals using ng-model as it is the list of items. Setting it replace the list value by the chosen item (which is a list of characters). Causing the strange behaviour.
<select ng-model="item" ng-options="visual for visual in visuals">
This new variable must be declared in the scope. It is also used to set an initial value:
$scope.item = 'none';
Your switch usage was also wrong, you need en enclose condition in the switching block.
<div ng-switch on="item">
<span ng-switch-when="lots">Youtube</span>
<span ng-switch-default></span>
</div>
If you want to set the content of the HTML using ng-bind-html-unsafe you should provide a variable as parameter (not sure how you could inject javascript that way).
<span ng-switch-when="lots" ng-bind-html-unsafe="youtube">Could not evaluate 'youtube' variable</span>
The span content is then replaced. Of course a new variable must be defined in the scope to hold the HTML content:
$scope.youtube = "<hr/>This is an HTML content<hr/>";
I updated the jsFiddle: http://jsfiddle.net/PMpLa/4/