My scope has an array of objects named "ideas" in this format:
{
"id":1,
"own":true,
"ideas":[
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"ready"
]
}
I first need to filter based on the "own" attribute (custom filter includeReceived). Then I want the final result to return only matching items from the nested "ideas" array.
<div ng-repeat="idea in ideas | includeReceived:checked">
<div ng-repeat="ideaText in filteredIdeas = (idea['ideas'] | filter:search)">
{{ideaText}}
</div>
<div ng-hide="filteredIdeas.length">There is no result</div>
</div>
This works nicely, but I want to display the message "There is no result" when nothing is found. The above code displays this message for each iteration of the outer ng-repeat. Thank you very much for any ideas.
You can append the "search" filter to the first set of results to weed-out those results that don't have the searched-for text. Then, Angular 1.3.0 provides an ability to alias the filtered results, so you could do something like:
<div ng-repeat="idea in ideas | includeReceived:checked | filter: {ideas: search} as filteredIdeas">
<div ng-repeat="ideaText in idea['ideas'] | filter:search">
{{ideaText}}
</div>
</div>
<div ng-if="filteredIdeas.length === 0">There is no result</div>
Thanks for the inputs, guys. Using New Dev's approach in Angular 1.2.26, this code does the trick:
<input type="checkbox" ng-model="checked" ng-init="checked=true">Include ideas you received<br/>
<div ng-controller="IdeaCtrl">
<div ng-repeat="idea in filteredIdeas = (ideas | includeReceived:checked | filter:search)">
<div ng-repeat="ideaText in idea['ideas'] | filter:search">
{{ideaText}}
</div>
</div>
<div ng-hide="filteredIdeas.length">There is no result</div>
You can put the message outside the ng-repeat
<div ng-hide="filteredIdeas.length">There is no result</div>
Related
I am trying to use a filter with an expression in ng-repeat like this -
<div ng-repeat= "fruit in fruits | filter: {fruit.color !: 'red'}">
{{ fruit }}
</div>
But it doesn't seem to work, can someone confirm that it is possible to use expression in filters(I am using angular 1.0.8)
First thing you should upgrade you Angular Version to latest, it would not make sense to stay with Angular 1.0.x
<div ng-repeat= "fruit in fruits | filter: {color : '!' + selected Color}">
{{ fruit }}
</div>
This is just example of filter in ng-repeat:
<div ng-repeat= "fruit in fruits" >
{{ fruit | uppercase}}
</div>
$scope.fruits = ['apple','banana']
OutPut:
APPLE
BANANA
Having difficulty to assign ng-model values inside ng-repeat
So i am repeating this div with an array of json objects. I can print the 'ID' value of the object inside any element. But i can't use that as the ng-model value for the checkbox inside. I must be doing something wrong here. Any idea what that is?
Will really appreciate it if someone can take a look.
Here is a codepen of the issue. Code pen link
.
value for the model that assign to the checkbox is boolean whether it is true or false, unless you define the value. but again it is only 2 options value.
so, rather than using id as model attribute, you might change it to some attribute that could store boolean value. why not using 'isSelected'
<div ng-controller="quoteController" ng-app="MyApp" class="benefits-container">
<!-- benefits -->
<div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}">
<div class="top">
<md-checkbox ng-model="pe.isSelected" class="blue"></md-checkbox>
<h5 class="item">{{pe.name}}</h5>
<h5 class="prize">{{pe.loading}}</h5>
</div>
<div class="bottom">
<p>{{pe.limitDisplay}}</p>
</div>
</div>
</div>
then update some isSelected value:
...
{
"id": "PVC022",
"name": "NCD Protector",
"limit": null,
"limitDisplay": "N/A",
"desc": "<TBC>",
"type": "optional",
"loading": 0.0,
"isSelected": true
},
...
i have done exactly the same code the difference is the filter that you applied on ng-bind. try reading the article i suggest use ng-value.
whats the difference between ng-model and ng-value
try using ng-repeat and ng-model withing the same line.
instead of this
<div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}">
<div class="top">
<md-checkbox ng-model="pe.id" class="blue"></md-checkbox>
use this
<div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}"
ng-model="pe.id">
<div class="top">
<md-checkbox class="blue"></md-checkbox>
I am trying to use a value from the first ng-repeat in a filter in the nested ng-repeat.
Specifically {{alpha.value}}. This renders fine in the first repeat, note the filter and the h3 tag.
However the expression renders as text in the second repeat, again not the filter, and thus the repeat is empty as it doesn't match. I feel like I am missing something incredibly obvious. Any thoughts? Thanks
<div ng-repeat="alpha in alphabet" ng-hide="(tlds | filter: {group: '.{{alpha.value}}'}).length<1" ng-cloak="cloak">
<h3>{{alpha.value}}</h3>
<ul class="list-group">
<li class="list-group-item" ng-repeat="tld in tlds | filter: {group: '.{{alpha.value}}'} | filter: {name: query} | orderBy: 'name'" ng-cloak="cloak">
{{tld.name}}
</li>
</ul>
</div>
JS Fiddle with it broken http://jsfiddle.net/eminentstyle/v5g4u948/2/
If I manually insert the intended expression result, line 20 filter: {group: '.c'}, you can see the intended result for the first section http://jsfiddle.net/eminentstyle/kwmj5mtu/2/
I think you want this: http://jsfiddle.net/v5g4u948/3/
<div class="container" ng-app="Tlds">
<div class="page-header">
<h1>Tlds</h1>
</div>
<div class="row">
<div class="col-sm-12">
<input type='search' class='form-control' placeholder='Search' ng-model='query' />
</div>
</div>
<div class="row">
<div class="col-sm-12" ng-controller="TldsCtrl">
<div ng-repeat="alpha in alphabet" ng-hide="(tlds | filter: {group: '{{alpha.value}}'} | filter: {name: query}).length<1" ng-cloak="cloak">
<h3>{{alpha.value}}</h3>
<ul class="list-group">
<li class="list-group-item" ng-repeat="tld in tlds | filter: {group: alpha.value} | filter: {name: query} | orderBy: 'name'" ng-cloak="cloak"> {{tld.name}}
</li>
</ul>
</div>
</div>
</div>
</div>
Be carefull filter: {group: '.{{alpha.value}}' means to filter all group that contains alpha.value. For example . 'ie' matches with 'e'.
I am trying to execute the below code where I'm trying use ng-repeat to iterate through a key:value pair.
But ng-repeat is not following the index instead of rendering the second key value its rendering the thrid index
HTML:
<div ng-app ng-controller="ItemsCtrl">
Type anything in the first box.
<div ng-repeat="(key, value) in item">
<input type="text" ng-model="item[key]" />
</div>
{{item | json}}
</div>
Javascript Controller:
function ItemsCtrl($scope) {
$scope.item = {
"1": "one",
"2": "two",
"10": "ten"};
}
Below is the jsfiddle link for the problem http://jsfiddle.net/nMjet/13/
Thanks #Blackhole.
Below the modified Code
HTML:
<div ng-app ng-controller="ItemsCtrl">
Type anything in the first box.
<div ng-repeat=" item in items">
<input type="text" ng-model="item[$indexxcdxdd]" />
</div>
{{item | json}}
</div>
Javascript Controller:
function ItemsCtrl($scope) {
$scope.items = ['one','two','ten'];
}
If I write twice the same directive as attribute, I get twice the result, but when I write it twice as element, I only get the result once, why?
I have a very simple directive:
.directive("ngMyText", function(){
return {
restrict: 'AE'
};
})
An $scope with a collection of items:
$scope.items = [
{ text:"AAA", show:true },
{ text:"BBB", show:true }
];
Therefore, when doing this:
<div ng-controller="myController">
<div class="container">
<div data-ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></div>
<div data-ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></div>
</div>
<div class="container">
<ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text" />
<ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text" />
</div>
</div>
I would expect to get the collection rendered twice in each container, but in the second container only happens once. Why does this happen?
I have created an runable example with the problem: http://jsfiddle.net/vtortola/mzAPk/
Cheers.
See Are (non-void) self-closing tags valid in HTML5? This
<ng-my-text ng-repeat="item in items | filter:{show:true}"
ng-bind="item.text" />
should be
<ng-my-text ng-repeat="item in items | filter:{show:true}"
ng-bind="item.text"></ng-my-text>