I have a grouped nested object that I want to filter. The filter works only on the second group.
<input type="radio" ng-model="grouping" value="name" />Name
<input type="radio" ng-model="grouping" value="date" />Gender
<input type="radio" ng-model="grouping" value="jsonpath" />Hair
<input type="text" ng-model="searchInput" />
<div data-ng-repeat="(group, details) in group(reports, grouping) | filter:searchInput">
<h2>{{group}}</h2>
<ul>
<li data-ng-repeat="report in details | filter:searchInput">
{{ report.name }}
</li>
</ul>
</div>
Here is the fiddle: http://jsfiddle.net/Tropicalista/aF2aL/15/
[UPDATE]
I have an updated plunker, not sure if i'm on the right direction: http://plnkr.co/edit/MYkTJoAIXV2XEN6glrDQ?p=preview
What is the purpose to put the filter on the outer repeater? Just remove it.
<div data-ng-repeat="(group, details) in group(reports, grouping)">
Demo
Related
I want to validate an angular form input and give it a class if is not $valid, the problem is, it´s inside a ng-repeat looping an array of int, and the input name is based on the $index:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_$index.$valid}">
<input type="text" id="ax_{{$index}}" name="ax_{{$index}}" ng-model="item" required=""/>
</div>
</li>
Everything gets the $index in the output, but the ng-class:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_$index.$valid}">
<input type="text" id="ax_0" name="ax_0" ng-model="item" required=""/>
</div>
</li>
What I expected it to be:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_0.$valid}">
<input type="text" id="ax_0" name="ax_0" ng-model="item" required=""/>
</div>
</li>
I have searched and people have similar problems but none of them have been solved so far. Is there any angular-super-hero-master-plus-advanced who can help me with it :) ?
Because you are constructing the property/key on form dynamically, you do the same thing you would in normal Javascript: use square["bracket"] notation.
Change your markup to:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form['ax_' + $index].$valid}">
<input type="text" id="ax_{{$index}}" name="ax_{{$index}}" ng-model="item" required=""/>
</div>
</li>
<div ng-init="items=[{'id':1,'name':'Amit'}]">
<input type="text" size="40" ng-model="searchString" placeholder="Search">
<ul>
<li ng-repeat="i in items | filter:searchString">{{ i.id }}</li>
</ul>
</div>
Output :
<div ng-init="items=[{'id':1,'name':'Amit'}]">
<input type="text" size="40" ng-model="searchString" placeholder="Search" class="ng-pristine ng-untouched ng-valid ng-empty">
<ul>
<!-- ngRepeat: i in items | filter:searchString -->
</ul>
</div>
When I use single key value then it's not working.But when I use multiple key value like: [{'id':1,'name':'Amit'},{'id':2,'name':'Neeraj'}] then it's working.
What is the mistake in my code.
i double check this and its working
<html>
<body ng-app="">
<div ng-init="items=[{'id':1,'name':'Amit'}]">
<input type="text" size="40" ng-model="searchString" placeholder="Search">
<ul>
<li ng-repeat="i in items | filter:searchString">{{ i.id }}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</body>
</html>
As you have single key, you can directly access it using items. Id, and items.name
When you have multiple value, you can use ng-repeat for a loop. Hope this might help you.
I am trying to create a dynamic form with multiple radio button options and get selected values..
<form name="myForm" ng-submit="sendAnswers(question)">
<ul>
<li ng-repeat="question in questionForm.questions">
<p>{{question.description}}</p>
<ul>
<li ng-repeat="option in question.options">
<input type="radio" ng-model="question.answer" value="option.value">
{{option.value}}
</li>
</ul>
</li>
</ul>
<p><input type="submit" value="sendAnswers"></p>
</form>
Problem is as I click on button, both options get selected..what am I doing wrong here?
Live example: http://plnkr.co/edit/aStk4SCHzAW0AKQuH7JE?p=preview
Thanks in advance!
Add a "name" parameter:
<input name="{{question.description}}" type="radio" ng-model="question.answer" value="option.value">
Also, you need to change "value" to {{option.value}}
<input name="{{question.description}}" type="radio" ng-model="question.answer" value="{{option.value}}">
Working Example
Plunker
How can i make yes radio button to be checked on page load and show/hide the field-set accordingly. Currently on load radio button is checked but its not showing the fieldset.
Html
<form name="myform" class="form " novalidate >
<fieldset>
<span>Would you like a receipt sent to you?</span>
<ul class="vList">
<li>
<input type="radio" name="receiptConfirmation" id="receiptAffirm" ng-model="reciept" value="yes" ng-checked="true">
<label class="form__radioLabel" for="receiptAffirm:" >Yes</label>
</li>
<li>
<input type="radio" name="receiptConfirmation" id="receiptDeny" ng-model="reciept" value="no">
<label class="form__radioLabel" for="receiptDeny">No </label>
</li>
</ul>
</fieldset>
<fieldset class="fieldset" ng-show="reciept=='yes'">
<legend class="isVisuallyHidden">Email Receipt</legend>
<ul class="vList">
<li>
<label for="firstName" class="form__label">First Name</label>
<input id="Text4" class="form__input form__input--textfield" type="text" >
</li>
<li>
<label for="emailAddress" class="form__label">Email Address</label>
<input id="email1" class="form__input form__input--textfield" type="email">
</li>
</ul>
</fieldset>
</form>
Do not mix ng-checked with ng-model. Setting ng-checked will not update the model, it will just update the element's checked property. Instead set the ng-model reciept to the desired value.
Remove ng-checked from input:-
<input type="radio" name="receiptConfirmation" id="receiptAffirm"
ng-model="reciept" value="yes">
In your controller set the model:-
app.controller('MainCtrl', function($scope) {
$scope.reciept = "yes";
});
Demo
Just set $scope.reciept = 'yes'; in your controller?
You have spelt receipt wrong also.
Angular ng-repeat with filter works this way (I just discovered it by observing DOM in Chrome's developer tools):
It actually removes the nodes which don't satisfy filter condition and re-renders everything.
See this fiddle example. If you look at the DOM, and see what happens there, you can understand what I mean.
<div ng-app>
<h2>Instant Search</h2>
<div ng-controller="SearchCtrl">
<input type="text" ng-model="filterText" />
<ul>
<li ng-repeat="state in states | filter:filterText">
<label>
<input type="checkbox" ng-model="state.abbreviation">
{{state.name}}
</label>
</li>
</ul>
</div>
</div>
What I need now, is to make angular js hide nodes, not remove them. In other words, when I filter nodes, for example I want to make those nodes which don't satisfy filter condition to have a class of hidden, and I'll hide them via CSS.
ng-show placed on the repeating element will cause them to be hidden: Fiddle http://jsfiddle.net/NAumK/19/
http://docs.angularjs.org/api/ng.directive:ngShow
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<input type="text" ng-model="filterText" />
<ul>
<li ng-repeat="state in states" ng-show="state.name.indexOf(filterText) != -1">
<label>
<input type="checkbox" ng-model="state.abbreviation">
{{state.name}}
</label>
</li>
</ul>
<input type="text" ng-model="textFilter" />
</div>
</div>
Filters remove elements as does the ng-if and ng-switch directives. You can also use css coupled with the ng-class directive to hide the elements however I recommend sticking with the ng-show for clarity. One further note of caution, hiding as opposed to removing elements makes the test cases harder to prove. You can have collisions with classes that display incorrectly but still pass (Selenium) tests.
You can use ng-show or ng-hide instead of filters.
You cannot use filter in ng-repeat because it filters the actual array that ng-repeat receives. You'll have to implement your own "filtering" logic.
I'd do it using a conditional ng-class, like this:
<li ng-repeat="state in states" ng-class="{'hidden': isHidden(state)}">
<label>
<input type="checkbox" ng-model="state.abbreviation">
{{state.name}}
</label>
</li>
$scope.isHidden = function(state) {
if(state.name.toLowerCase().indexOf($scope.filterText.toLowerCase()) < 0) {
return true;
}
return false;
}
I thinks that one answer would be like this
<div ng-app>
<h2>Instance Search</h2>
<div ng-controller="SearchCtrl">
<input type="text" ng-model="filterText" />
<ul>
<li ng-repeat="state in states"
ng-show="state.name.tolowerCase().indexOf(filterText.toLowerCase()) != -1">
<label>
<input type="checkbox" ng-model="state.selected">
{{state.name}}
</label>
</li>
</ul>
</div>
</div>
Just replace filter with:
ng-show="([state] | filter:filterText).length > 0"