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
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 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
I am having issues accessing variables (attached to $scope) inside ng-repeat loop. My ng-repeat is as follows:
<div class="row" ng-repeat="Message in Messages">
<p>{{ Message.Sender ChattingWith}}</p>
</div>
I can use ChattingWith variable outside the ng-repeat but can't use it inside for some reason. I have used $parent.ChattingWith without any luck. Any help would be appreciated.
Write code like this:
<div class="row" ng-repeat="Message in Messages">
<p>{{ Message.Sender + ChattingWith}}</p>
</div>
This will solve the problem.
I had this problem when calling a function from ng-click using $scope.var as parameter.
For instance:
Not Working:
<div ng-repeat="value in values track by $index">
<a ng-click="function({{ value }})">{{ value }}</a>
</div>
Working:
<div ng-repeat="value in values track by $index">
<a ng-click="function(value)">{{ value }}</a>
</div>
Why we can't use {{ }} if the variable is from $scope, declared on an Angular controller? Is there others situations when I will not use it?
We can not use expressions in directives like ng-click.
Expression can access variables and functions from the scope.
while using it in function, there is no need to write expression
First thing function is in built keyword.You can not use it.
suppose in controller you defined function like this.
$scope.callMe = function(){
}
then define the html :
<div ng-repeat="value in values track by $index">
<a ng-click="callMe(value)">{{ value }}</a>
</div>
I'm trying to ng-repeat through an array, but need to hide if a property is undefined.
I tried doing to do is this:
<div ng-repeat="person in people | filter:search" ng-if="last == undefined">
{{person.last}}, {{person.first}}
</div>
Heres a basic jsfiddle of what I'm trying to do:
http://jsfiddle.net/HB7LU/4556/
Thank you!
<div ng-controller="MyCtrl">
<div ng-repeat="person in people | filter:search" ng-show="person.last">
{{person.last}}, {{person.first}}
</div>
Try testing for person.last instead of just 'last'.
I used ng-show instead of ng-if as well.
If you want to just hide the rows, then mccainz's answer will work. If you want to actually remove them from the DOM, then create a filter:
$scope.fullNameFilter = function(person){
return person.last;
};
HTML
<div ng-repeat="person in people | filter: fullNameFilter">
JSFIddle