I am new in Angular.js, I am reading my first book and thought to stop and experiment with what I've learned so far. I try to create a limitTo filter , but the number will be inserted by the user.
<script>
var monthly=[123.659855, 89.645222, 97.235644, 129.555555]
function MyFilterDemoCtrl($scope) {$scope.monthly= monthly;};
</script>
Num: <input ng-model="num" type="text" />
<li ng-controller="MyFilterDemoCtrl" ng-repeat="gigabytes in monthly | limitTo:{{num}}"> {{ gigabytes | number:2}} </li>
So when I type 3 in the Num only the first three numbers are printed in the li. But I get nothing. What am I missing and what is the proper way to implement such task? Should I code like limitTo:{{num}} or limitTo:num
Thanks in advance
Two things:
You need to have the ng-model="num" in the controller's scope. Simply moving the ng-controller outside its declaration fixes this.
It should be limitTo: num rather than limitTo: {{num}}. You are not interpolating the value of num into a string.
var monthly = [123.659855, 89.645222, 97.235644, 129.555555];
function MyFilterDemoCtrl($scope) {
$scope.monthly = monthly;
}
angular.module('app', [])
.controller('MyFilterDemoCtrl', MyFilterDemoCtrl);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyFilterDemoCtrl">
Num: <input ng-model="num" type="text" />
<li ng-repeat="gigabytes in monthly | limitTo: num">
{{ gigabytes | number:2}}
</li>
</div>
Related
Sorry if this look like a stupid question but I have just started using angular.js and certain things are not easy to catch.
I have a list of numbers which I am showing using this:
<li data-ng-repeat="i in getNumber(list) track by $index" data-ng-click="myFunction($index)" data-ng-class="myClass">{{$index+1}}</li>
This is showing my list as 1 2 3 4 5 etc
I'd like to change this to show something different upon reaching a specific index, i.e.
if index == 5 then show ABCD instead of {{$index+1}}
Is it something I can achieve with ng-repeat or do I need to use a different approach?
Thanks a lot for the input
You can achieve it inside the interpolation markup {{...}} only, as we can do all normal javascript operations inside it:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<li data-ng-repeat="i in [1,2,3,4,5,6,7] track by $index">
{{ $index === 5 ? 'ABCD' : $index+1 }}
</li>
</div>
</section>
I am using bootstrap to display a grid of projects with each row having 3 columns. In order to accomplish this, I am using ng-repeat twice like below.
<div class="row" ng-repeat="chunk in projects">
<div class="col-sm-4" ng-repeat="project in chunk | orderBy:'title'">
{{project.title}}
</div>
</div>
I want to be able to sort the project based on its title field. Applying a filter only sorts a subset of the whole list i.e. sorts at the chunk level rather than the projects level.
var projects = [[{"title":"Z"},{"title":"A"},{"title":"M"}],
[{"title":"Z"},{"title":"A"},{"title":"M"}]];
After the orderBy happens, the rows are A M Z, A M Z. How do I get it to display A A M, M Z Z?
Here is the plunk for the above problem.
//EDIT : The above plunk points to the solution because I updated the plunk.
You'll need a custom filter that will turn your sub-arrays into a single array. The whole point of having separate arrays would be to isolate the contents, which is the opposite of what you want.
Filter:
yourAppModule
.filter('titleSort', function(){
return function(input){
var fullArray = []; //Will be the output array
for(var i=0;i<input.length;i++)
fullArray.concat(input[i]);
//Iterates through all the arrays in input (projects)
//and merges them into one array
fullArray = fullArray.sort(function(a,b){return a.title>b.title});
//Sorts it by the title property
var chunks = [];
var currentChunk;
for(var i=0;i<fullArray.length;i++){
if(i%3===0){
currentChunk = [];
chunks.push(currentChunk);
}
currentChunk.push(fullArray[i]);
}
return chunks;
};
} ...
Now your view can be this:
<div class="col-sm-4" ng-repeat="project in projects | titleSort">
{{project.title}}
</div>
I was able to solve this problem finally through filter chaining. I used angular-filter module/library but this can be even done without angular-filter.
<div class="container" ng-controller="ExampleController as exampleVm">
<div class="row" ng-repeat="chunk in exampleVm.projects| chunkBy: 'title' | groupBy : 3">
<div class="col-sm-4" ng-repeat="project in chunk">
{{project.title}}
</div>
</div>
I flattened the array and made it look like this.
var projects = [{"title:Z"},{"title":"A"},{"title":"M"},{"title:Z"},{"title":"A"},{"title":"M"}]
In the filter chain, I order the elements in the flattened array first by title and then divide it into subarrays of 3 elements each. Hope this helps.
You can find the plunk here.
try this. may be help you.
var app = angular.module("app",[])
app.controller('ctrl',['$scope', function($scope){
$scope.data = [[{"title":"Z"},{"title":"A"},{"title":"M"}],
[{"title":"Z"},{"title":"A"},{"title":"M"}]];
$scope.data2 = [];
angular.forEach( $scope.data,function(d){
angular.forEach(d,function(d1){
$scope.data2.push(d1);
})
})
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" ng-controller="ctrl">
<div class="item item-checkbox">
<div class="row">
<div class="col-sm-4" ng-repeat="project in data2 | orderBy:'title'">
{{project.title}}
</div>
</div>
</div>
In AngularJS I have an Object with keys that are letters of the alphabet and each key is an array of people.
<div ng-repeat="(letter, group) in people"></div>
<div ng-repeat="people in letter"></div>
</div>
This is to create something like this in HTML:
A. Arnold, Avery, Adam, Alex
B. Bob, Boris
C. Chris, Connor, Caleb
How would I go about filtering each individual field by name? For example applying this.
<div ng-repeat="people in letter | filter:{'name':search.query}">
Works fine, however, you get a result like this when you type "A" in:
A. Arnold, Avery, Adam, Alex
B.
C.
How can I collapse B and C? Is there a better organization method for this data?
The trick here is to store your filtered names in a scope variable so you can do a length check to hide the empty result.
You can do this with the following markup:
<div ng-repeat="people in filtered = (group | filter: search)"></div>
Then add ng-if="filtered.length > 0" to the tag you want to hide if result is 0.
Please have a look at the demo below or in this jsfiddle.
angular.module('demoApp', [])
.controller('mainController', function($scope) {
$scope.peoples = {
A: ['Arnold', 'Avery', 'Adam', 'Alex'],
B: ['Bob', 'Boris'],
C: ['Chris', 'Connor', 'Caleb']
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<input ng-model="search" placeholder="enter search string"></input>
<div ng-repeat="(letter, group) in peoples">
<strong ng-if="filtered.length > 0">{{letter}}</strong>
<div ng-repeat="people in filtered = (group | filter: search)">{{people}}</div>
<br ng-if="filtered.length > 0"/>
</div>
</div>
Ok, here you go guys.
I am learning Angular and wondering how to order items (array of strings). I know that there are different ways using controller etc, but I am just starting to learn it from today.
Was wondering if there is a way to orderBy on names? I know orderBy can be applied to a property name in array of objects if we have, but placing it in ng-repeat.
But how to achieve it in my code below?
EDIT: I need the orderby both on initial display on page load, as well as when the user types something in the textbox when it filters.
<html data-ng-app="">
<head>
<title></title>
</head>
<body data-ng-init="names=['Sita','Ram', 'Amit','Cat','Boushick' ] ">
<input type="text" name="txtName" data-ng-model="typedName" />
<br />
Typed Name is: {{ typedName }}
<br />
Names:
<ul |orderBy:'names' >
<li data-ng-repeat="personName in names | filter:typedName "> {{ personName | uppercase}}
</li>
</ul>
<script src="Scripts/angular.min.js"></script>
</body>
</html>
yes use orderBy as ,
<li data-ng-repeat="personName in names | orderBy:personName | filter:typedName "> ...
here is the Demo Plunker
Use orderBy:'toString()' before filter :)
<li data-ng-repeat="personName in names | orderBy:'toString()'|filter:typedName "> {{ personName | uppercase}}
Here is Plunker
In my app, I am using the search box to filter the persons. the persons name are static(at present), how can i make this filter case sensitive?
because people can enter their name by their wish here. so I am looking this to filter by how the way they entered their name.
here is my config, but not working;
<div class="container">
<h1>Directive Test 1</h1>
<input type="search" name="search" ng-model="search" placeholder="Search a person" id="">
<div class="list" ng-controller="List">
<ul>
<li ng-repeat="person in people | filter:search:upperCase"> // not working! {{person.name}}</li>
</ul>
</div>
</div>
Any one help me please?
UPDATE
my js code :
var List = function($scope){
$scope.people = [
{name:'Mo',age:20},
{name:'Si', age:22},
{name:'Yo', age:33}
]
}
Demo is here(buggy)
You could supply a comparator function to the filter like this:
<li ng-repeat="person in people | filter:search:comparatorFunction">
and in a controller:
$scope.comparatorFunction = function (name, search) {
return (''+name).indexOf(''+search) > -1;
};
Hope this helps.
uppercase and filter are two different fitlers
change this
person in people | filter:search:upperCase
to this
person in people | filter:search | uppercase
uppercase filter is used when you want to render output html in uppercase
Now, to filter case-sensitive, use custom case sensitive filter
Updated fiddle: http://jsfiddle.net/Tw7kW/