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 }"
Related
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
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
I have the template:
<div ng-repeat="CableFilterName in CableFilterNames">
<fieldset>
<legend>{{CableFilterName.filterName}}</legend>
<ul id="">
<li ng-repeat="filterValue in CableFilterName.filterValues">
<input type="checkbox"/> {{filterValue}}
<!-- <select> -->
</li>
</ul>
</fieldset>
</div>
where filterValue in nested ng-repeat has several different values. So question is how to define what is current filterValue-value and depending on it use checkbox or select or any arbitrary HTML ?
UPD:
filterValues = ['Cable System','Electrical', 'Lighting'];
To have a kind of if statement, you can use the ngSwitch directive in AngularJS :
http://docs.angularjs.org/api/ng.directive:ngSwitch
For example on your ngRepeat loop :
<div ng-switch on="filterValue">
<div ng-switch-when="value1">//Do what you want when "value1"</div>
<div ng-switch-when="value2">//Do what you want when "value2"</div>
...
<div ng-switch-default>//Do what you want by default</div>
</div>
I Hope it's what you want, I don't really understand what you try to achieve.
I am creating a list using ng-repeat something like this
<div ng-repeat="file in files">
{{file.name}}
</div>
But for the last element alone I would like to have a class (<div class="last">test</div>) included to it. how can i achieve this using ng-repeat?
You can use $last variable within ng-repeat directive. Take a look at doc.
You can do it like this:
<div ng-repeat="file in files" ng-class="computeCssClass($last)">
{{file.name}}
</div>
Where computeCssClass is function of controller which takes sole argument and returns 'last' or null.
Or
<div ng-repeat="file in files" ng-class="{'last':$last}">
{{file.name}}
</div>
It's easier and cleaner to do it with CSS.
HTML:
<div ng-repeat="file in files" class="file">
{{ file.name }}
</div>
CSS:
.file:last-of-type {
color: #800;
}
The :last-of-type selector is currently supported by 98% of browsers
To elaborate on Paul's answer, this is the controller logic that coincides with the template code.
// HTML
<div class="row" ng-repeat="thing in things">
<div class="well" ng-class="isLast($last)">
<p>Data-driven {{thing.name}}</p>
</div>
</div>
// CSS
.last { /* Desired Styles */}
// Controller
$scope.isLast = function(check) {
var cssClass = check ? 'last' : null;
return cssClass;
};
Its also worth noting that you really should avoid this solution if possible. By nature CSS can handle this, making a JS-based solution is unnecessary and non-performant. Unfortunately if you need to support IE8> this solution won't work for you (see MDN support docs).
CSS-Only Solution
// Using the above example syntax
.row:last-of-type { /* Desired Style */ }
<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
{{file.name}}
</div>
That works for me! Good luck!
You could use limitTo filter with -1 for find the last element
Example :
<div ng-repeat="friend in friends | limitTo: -1">
{{friend.name}}
</div>
The answer given by Fabian Perez worked for me, with a little change
Edited html is here:
<div ng-repeat="file in files" ng-class="!$last ? 'other' : 'class-for-last'">
{{file.name}}
</div>