I need to evaluate {{ results.example }} in a template like this one:
<div ng-model='example' ui-ace="aceOptions">{{ results.example }}</div>
But it doesn't work. It works only with a single scope variable like this {{ example }}.
Here is JSFiddle: http://jsfiddle.net/ktsgyLmb/8/
You should also change the ng-model
<div ng-model='results.example' ui-ace="aceOptions">{{ results.example }}</div>
Working fiddle
Related
I am working on a small AngularJS application. In one of the views, I have replaced some hard-coded html with data coming from a JSON file that I iterate through:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction('{{item.action}}')">
{{item.name | translate }}
</div>
</div>
The problem is that, since this replacement, the function fired by ng-click, that used to be (hard-coded) ng-click="$ctrl.selectAction('register'); and so on, does not work anymore.
Why does that happen? How can I fix the problem?
You don't need quotes or {{ }} inside ng-click:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction(item.action)">
{{item.name | translate }}
</div>
I have an item in my array that is true or false.
I use this to say
<div ng-show="{{ item.isDirectory }}">
I also want to use the same rule to apply a class to that div if item.isDirectory == true
First, it's incorrect:
<div ng-show="{{ item.isDirectory }}">
ngShow waits an expression, it works just as below:
<div ng-show="item.isDirectory">
Also, preferably use ngIf directive as a good practice.
To apply a class in your div based on a condition, you should use ngClass directive:
<div ng-class="{ 'yourTrueclass': item.isDirectory, 'yourFalseClass': !item.isDirectory }"></div>
Take a look on this tutorial.
On a component is it possible to bind in the style like bindonce? Please provide an example.
since angular have v1.3 it used following syntax for bindonce
<div ng-repeat="item in ctrl.results">
<div>{{ ::item.name }} - {{ ::item.description }}</div>
</div>
<div ng-if="::vm.user.loggedIn"></div>
for class
ng-class="::{ loggedIn: vm.user.loggedIn }"
According to Exploring Angular 1.3: One time bindings;
Using new syntax is as easy as starting an expression with ::. So if we apply the one-time expression to our example above, we change this:
<p>Hello {{name}}!</p>
To this
<p>Hello {{::name}}!</p>
and it is now one way binding.
But how can we create a one time binding when using angular directives such as ng-class? I tried the following, but it did not work:
ng-model="::name"
ng-class="['label',{'label-danger': 'High' == ::tsk.Priority}]:
Got my answer here http://toddmotto.com/angular-one-time-binding-syntax/
{{ ::vm.user }}
<div ng-if="::vm.user.loggedIn"></div>
<div ng-class="::{ loggedIn: vm.user.loggedIn }"></div>
<ul>
<li ng-repeat="user in ::vm.users"></li>
</ul>
Thanks to downvoters.
This does not seem possible, but is it:
<div ng-repeat="item in myitems | {{ searchfilter }}">
<span>{{ item.title }}</span>
</div>
or some variant of it? All I get are no results.
searchfilter should not have {{ }} around it. Since this is a directive, angular knows how to deal with the variable. You only need the braces when trying to inject a variable from angular scope into the non-angular HTML.
You should correct syntax to this instead:
<div ng-repeat="item in myitems | filter:searchfilter">
With Search filter Moustaches :<span>{{ item.title }}</span>
</div>
Have created a small plunk for reference.
http://plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview