Hi i have situation were multiple ng-repeat are nested as
<form ng-repeat="pt in prolist">
Frequency <input type="checkbox" ng-model="pt.req" />
<div ng-repeat="disc in prolist">
------
</div>
</form>
What I am trying to do is something like this
<div ng-repeat="disc in prolist" where pt.id =disc.Pt_id>
Please let me know how to write this line of code in angularjs
Thanks
You would basically turn that "where..." for into a filter pipe: http://docs.angularjs.org/api/ng/filter/filter
E.g., try:
ng-repeat="disc in prolist | filter:{Pt_id: pt.id}" ...
You can filter repeaters in AngularJS.
Try using filter, the following link displays how to use filters with ng-repeat.
ng-repeat with filter
if your data set is huge then do the filtering in javascript and then push the objects to $scope.prolist to render that in view because filters affect the performance badly but for small data sets it is fine.
Related
I have a kendo multi select widget in my template, the code for which is given below.
<div ng-repeat="program in user.programs">
<label class="label-multi">{{program.name}}:</label>
<select kendo-multi-select="" k-option-label="'Select Services...'" k-data-text-field="'name'" k-data-value-field="'id'" k-data-source="services" k-ng-model="selectedServices" >
</select>
</div>
Each user has several programs, and each program has some services. Now I want to show the services that are already associated with the program i.e selectedServices which I initialize in my controller like so:
$scope.selectedServices = ["S1","S2"];
But the problem is that selectedServices vary for each program. I was thinking about doing something like selectedServices[0], selectedServices[1] and so on using $index. How do I achieve this and how do assign values to these selectedServices in my controller? Wouldn't it be an array of arrays?
Why don't you add a selectedServices array to user.programs?
For example:
$scope.user.programs.selectedServices = ["S1", "S2"];
I've got a pretty deeply nested JSON object being returned from an $http call, using Angular. In my template, I have to nest a few ng-repeats to get present the data. I can't seem to figure out how to bind the data using ng-model on a text input.
I read this question which said that the return object isn't automatically data in the $scope, and you have to loop through the data and instantiate the structure. I tried that as well with the same outcome.
// Seemingly unnecessary code
angular.forEach(Object.keys($scope.sources), function(sourcename){
$scope.sourceData[sourcename] = {};
angular.forEach(Object.keys($scope.sources[sourcename]), function(key){
$scope.sourceData[sourcename][key] = $scope.sources[sourcename][key];
});
Here's a fiddle showing my attempts:
http://jsfiddle.net/c7z9C/2/
I just want the values to be populated in the fields and bound to the model. Thanks in advance for any advice.
The HTML in your example was just a little off.
Here is a working fiddle.
The "not working" input just has some code in the ng-model that wasn't working.
First off, you don't need to interpolate {{ }} inside Angular directive attributes. So, this includes ng-model. So the {{key}} isn't necessary.
Also, sourceData was misspelled. It was supposed to be sourcedata and case matters.
So the end result for the ng-model is ng-model="sourcedata[key]":
<li ng-repeat="(key,value) in sourcedata">
WORKS: <input type="text" value="{{value}}" /><br/>
DOESN'T: <input type="text" ng-model="sourcedata[key]" />
</li>
I'm building a filtering component for a search app and it's my first dip into AngularJS.
Here's a Plunker or what I've got so far, it works how I want it to:
http://plnkr.co/I6ewaU
There are two things which concern me with this implementation:
I have to pass filters as an attribute of the filter directive to get access to filters on the MainController, surely there must be a better way to do this? I want to modify the filters object without having to pass it as an attribute.
Is it correct to define addFilter in the filtergroup directive, or should this be defined on MainController?
I have been searching on Google for a while, but can't seem to find an alternative and would appreciate any help with this.
Cheers.
AngularJS way is to show what it does in html.
Html has to explain the functionality by not hiding it to JS.
For example, how do I know this update filters unless I read your JS? Thus, try not to make any unless it is necessary. If you make any directive, try to expose the functionality to html.
<filtergroup type="filter-name" filter-store="filters">
And there are lots of good directives in Angularjs. I always use them first.
This is how I would do it, http://plnkr.co/edit/okCp5FZJo1ZR9962uaHT?p=preview
<div class="sidebar">
<p>Filters: {{ filters }}</p>
filter1 <input type="checkbox" ng-model="filters[1]"/><br/>
filter2 <input type="checkbox" ng-model="filters[2]"/><br/>
filter3 <input type="checkbox" ng-model="filters[3]"/><br/>
filter4 <input type="checkbox" ng-model="filters[4]"/><br/>
filter5 <input type="checkbox" ng-model="filters[5]"/><br/>
</div>
"less code, less manitenance"
I would like to show one div(message) when no items returned on filter(ng-repeat).
Filter is happening based on select box (ng-model). And there are no results for some select options, at that time user should be able to read a message at same place.
Can I use ng-show/hide here? How?
Thanks,
You can also save your filtered array in a variable and then use that variable inside the ng-show expression:
<select ng-model="shade" ng-options="shade for shade in shades"></select><br>
<ul>
<li ng-repeat="c in filteredColors = (colors | filter:shade)">{{c.name}}</li>
</ul>
<div ng-show="!filteredColors.length">No colors available</div>
You can see it in action in this plunker.
You can get the size of array returned by filter using something like
{{(data|filter:query).length}}
You can use this expression for ng-show expression. I am not sure how performant would it be.
There's a simpler solution using just the standard syntax of ngRepeat.
As stated in the official documentation, the ngRepeat accepts an alias for the collection even if filter are applied to it:
<div ng-repeat="model in collection | filter:search | orderBy: 'id' as filtered_result track by model.id">
{{model.name}}
</div>
Note: I added ad additional filter to the example copied from the documentation to have a more complete example.
In this example you can simply use:
<div class="alert alert-info"
ng-show="filtered_result.length == 0">
No items in the collection!
</div>
I tested it with AngularJS 1.5.0, I can't tell when this feature was introduced.
I have a simple html that loads JSON data into a table using Angularjs ng-repeat. One of the fields come as 1 or zero. I want to write a simple AngularJs directive that will show check-boxes as either checked(1) or not (0); and show text success against (1) and failure against(0) rows.
I'm starting with angular, you can use ng-model inside your ng-repeat and ng-if to display to decode value inside the loop.
Code:
<div ng-controller="Ctrl">
<div ng-repeat="o in obj">{{o.id}}
<input type="checkbox" ng-model="o.checked">
<div ng-if="o.checked == true">success</div>
<div ng-if="o.checked != true">fail!</div>
</div>
</div>
Demo: http://jsfiddle.net/IrvinDominin/G9m4H/