I am new to Angular and was not sure if this is the recommended syntax in Angular. In AngularJS, we can do one-time binding in this way:
<p>{{::myVar}}</p>
In Angular, I know we can do this.
<p [innerText]="myVar"></p>
My first question is, is this the only way to achieve {{::}} in Angular?
What if I have this situation in AngularJS:
<p>{{::myVar}} is a variable</p>
I have tried something like this
<p [innerText]="myVar + 'is a variable'"></p>
It works but again is this the recommended syntax?
in angular there are three ways of one way data biding from the component to the template:
Interpolation {{myVar}} => recommended use case: <p>{{myVar}} is a variable</p>
Property binding [attri]="url" => <img [src]="url">
bind-target="myVar"
EDIT: one time binding on the other hand is a feature we used to have in angular 1 and you can replicate it in angular using ChangeDetectionStrategy.CheckOnce
check the official docs here
Related
In angular we could do something like {{content?.body}} and it will render the content body if it exist in your data.
This doesn't seem to work in Vue. Is there a way to achieve this or i have to check manually.
In Vue you can use v-if directive. For example;
<div v-if="content.body">
{{content.body}}
</div>
See for more at Vue official docs
This syntax does not exist in vue.js and it will probably never exists according to the creator of Vue.js (see this post)
However you could use get from lodash combined with computed property to simulate this behavior :
computed: {
nestedProperty() {
return get(this, 'here.is.my.nested.property')
}
}
But the easiest way is probably to just add v-if directive to your template to check that property exists
I’m guessing you’re looking for a similar approach to optional unwrap from swift or safe call operator from kotlin.
Neither JS or Vue.js support this.
Your safest bet is to use a v-if on the entire chain
<span v-if=“content && content.body”>
{{content.body}}
</span>
There is a way to update a value in object and my view (HTML) display the new value without use two way bind with Angular 1.5.3?
If I understand you correctly you need a one-way bind from your controller to your view. If so, you can just use ng-bind
E.g.
{{ctrl.myName}} or <span ng-bind="ctrl.myName"></span>
If you want a one-time bind, this was introduced in angular 1.3:
E.g.:
{{::ctrl.myName}} binds myName once, future changes to it won't be picked up
I am trying to create a directive for md-autocomplete. I tried using the answer provide by AngularJS - Create a directive that uses ng-model, but it does not work for me.
My CodePen is here: http://codepen.io/colbroth/pen/QyMaQX/?editors=101.
The code is based on the Angular material demo for autocomplete at https://material.angularjs.org/latest/demo/autocomplete. I have multiple pages, which need an autocomplete field to select a state. I do not want to repeat the code for each web page component.
state-directive takes an md-autocomplete input, I need demoCtrl.selected state to reflect the same value in both cases. But when I update the input element, the state-directive does not reflect this and vice versa.
<input ng-model="demoCtrl.selectedState">
<state-directive ng-model="demoCtrl.selectedState">...</state-directive>
You are on the right track. Your problem is that your model is a string - a primitive in javascript but a ngModel always needs to be an object if you want to avoid these kind of problems.
Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.
Taken from Understanding-Scopes
It also links to this Youtube video - 3 minutes of well invested time
function DemoCtrl() {
var self = this;
self.state = {
selected: "Maine"
};
}
Fixed codepen
I want to declare my bindings as with AngularJS, but I'm using the KnockoutJS library. That is, I want to use Knockout but with the syntax I know from Angular. E.g.:
Today's message is: <span data-bind="visible:true,text:myMessage"></span>
I want to write using {{}} notation, like so:
Today's message is: <span {{visible:true,text:myMessage}}></span>
How can I replace data-bind attributes with {{}} based syntax in KnockoutJS?
http://mbest.github.io/knockout.punches/ is all you need.
Knockout Punches convert traditional KO syntax to something like AngularJS
<div>Hello {{name}}.</div>
I personally find it very easy to use.
I am trying to set the default button and get the current selected value.
The example without the repeat loop works.
Here is my plnkr:
http://plnkr.co/edit/t9CefA5bhLZs3RASmEUG?p=preview
It is based on this example:
http://plnkr.co/edit/LFj4inY9TLYZs9z7yHCr?p=preview
Thank you!
So, there were 2 things going on in your plunker.
Firstly the btn-radio attribute doesn't need interpolation ({{}}) you can (and should) provide an expression directly. So just write btn-radio="company.id" instead of btn-radio="{{company.id}}".
Secondly, you must know that the ng-repeat directive creates a new scope. This is a very, very common conceptual issue people have with AngularJS so I would encourage you to read https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance
Coming back to you particular problem you can either change you ng-model expression to point to a parent scope (ng-model="$parent.radioModel") or bind to an object property (ng-model="radioModel.id").
Here is a working plunk with the second approach:
http://plnkr.co/edit/uGAxaRlPFK6sD4tRjGXX?p=preview