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
Related
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>
I have an array of objects that I use for auto complete, I can successfully make the auto-complete work. Now I also want get masterId from the object(of selected business name) and add it to a div. Im a newbie in Angularjs
<div class="">
<script type="text/ng-template" id="customTemplate.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</a>
</script>
<div class="alignhManage">
<input type="text" ng-change="SetupAutoCom(selectedBusiness)"
ng-model="selectedBusiness" placeholder="Search Business"
typeahead="c as c.companyName for c in Business | filter:$viewValue | limitTo:10" typeahead-min-length='2'
typeahead-on-select='onSelectPart($item, $model, $label)'
typeahead-template-url="customTemplate.html"">
</div>
</div>
[{
"masterId": "1541",
"companyName": "HENTIQ ",
"address": { "addressNo": "146" }
}]
When you select the suggested item, typeahead-on-select is invoked. You can have the logic inside function onSelectPart by accessing $item's attributes.
Trying to separate a group of filters that come back from a search that I am doing in my angular app. When I do the search i receive back the json and it is grouped by heading. Can I only repeat the items in that particular group and separate them that way? The reason is that each group will be in a unique UI module. So some of the list will be returned and displayed in a slider and some will be in radios.
Here is the:
<div heading="{{filter.name}}"
ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name'"
is-open="true" show-attrs>
<h3>{{filter.name | uppercase}}</h3>
<div ng-repeat="option in filter.options">
<span ng-click="selectedFilter(filter, option.option, option.id)">
<a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a>
</span>
<br/>
</div>
</div>
So ultimately I would like to be able to target the filter.name.color and when it is this particular group have it display in this particular type of UI.
Any suggestions or links to readings is appreciated.
So based on your posted answer it looks like what you want to do is only show filters that have a particular name. If so, ngFilter should be able to take care of this like so:
| filter:{name: 'blah'}
(or {name: something} if the value is in a variable called something)
Full HTML:
<div heading="{{filter.name}}"
ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name' | filter:{name:'blah'}"
is-open="true" show-attrs>
<h3>{{filter.name | uppercase}}</h3>
<div ng-repeat="option in filter.options">
<span ng-click="selectedFilter(filter, option.option, option.id)"><a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a></span>
<br/>
</div>
<!--Then I just repeat each ng-if that I want to be available -->
</div>
If you want to filter based on filter.name.color, you can use | filter:{name.color: 'blue'}, but if having that dot in the object notation doesn't sit quite right with you, an alternate option is to use a custom filter function:
| filter:hasColor.bind(null, 'blue')
Then in your controller:
$scope.hasColor = function (color, filter) {
return filter.name && filter.name.color === color;
};
Ok, so what I tried was this and it seemed to get me some control over what I am showing and where:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div heading="{{filter.name}}"
ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name'"
is-open="true" show-attrs>
<div ng-if="filter.name=='blah'" >
<h3>{{filter.name | uppercase}}</h3>
<div ng-repeat="option in filter.options">
<span ng-click="selectedFilter(filter, option.option, option.id)"><a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a></span>
<br/>
</div>
</div>
<!--Then I just repeat each ng-if that I want to be available -->
</div>
So basically after the ng-repeat call within that div I am calling and nf-if and targeting the specific filter heading name/id to get only what I need to do.
I'm trying to filter an user list. I'm using a custom Bootstrap version and want to display a 4 columns table.
So far, I've the following code:
<div ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
<span ng-switch on="$index % 4">
<span ng-switch-when="0">
<div class="row-fluid">
<div class="span3" ng-if="users[$index+0]">
<user-item ng-model="users[$index+0]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+1]">
<user-item ng-model="users[$index+1]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+2]">
<user-item ng-model="users[$index+2]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+3]">
<user-item ng-model="users[$index+3]" on-click="showUser(userId)"></user-item>
</div>
</div>
</span>
</span>
</div>
So far, it works perfectly when there is no filter set.
When I set a searchValue, the $index cannot display the correct value (It will always start from 0 to the lengh of the filtered array).
My question is: Is there a way to correctly display the results in a 4-cols table and to filter the result ?
I don't think you need to add conditions in order to create a 4 column table using bootstrap css, simply use ng-repeat in a col-* element or using your custom span class (which I assume is created using bootstrap's mixins to create rows and columns).
DEMO
HTML
<input ng-model="searchValue.username" />
<div class="row-fluid">
<!-- simply change col-xs-3 to span3 -->
<div class="col-xs-3" ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
{{user.username}}
<user-item ng-model="user" on-click="showUser(user.id)"></user-item>
</div>
</div>
If the markup above does not work in your case because of the custom bootstrap that you're using, then you are probably better off with a filter that partitions your current array into sections of subarrays that represents a row-column relationship, answered by m59 in this SO Answer.
Next time try to give a shot to ngTasty table http://zizzamia.com/ng-tasty/directive/table it's based to bootstrap css table :)
I am trying to figure how to show or hide a list of ids and references, filtered by name with an input text.
The problem is that the list of items is going to be very long and I'd like the list to be hidden FIRST then SHOWN and FILTERED whenever I type something in the input that matches an existing item reference.
I tried to add a NG-SHOW directive in a <div> containing my NG-REPEAT but then nothing shows up...
like this:
Here's what I did : http://plnkr.co/edit/HVI7iAHdkLJJhGeN9DT0?p=preview
Commented out the ng-show!
Thx in advance
If I'm understanding you correctly, you don't want the list to show until someone tries to filter the list. If thats the case, just hide the list until the input has a length.
<ul ng-show="searchInput.length">
<li data-ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }} </li>
</ul>
http://plnkr.co/edit/HiibcFBahpXdux5YlOrh?p=preview
<body>
<div data-ng-controller="CTController">
Reference
<br/>
<input type="text" data-ng-model="searchInput" />
<!--<div data-ng-show="showIt(searchInput)">-->
<ul ng-if="searchInput">
<li data-ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }}</li>
</ul>
<!--</div>-->
</div>
</body>
I understand that you only need to show specific items when searched. For this, you don't have to pass value to that function. simple write model name in ng-show to show specific items when searched.
You can check this article for more information: http://blog.hfarazm.com/filters-in-angularjs/
<!doctype html>
<html data-ng-app="ColisType">
<head>
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js'></script>
<script type="text/javascript" src='script.js'></script>
</head>
<body>
<div data-ng-controller="CTController as abc">
Reference
<br/>
<input type="text" ng-model="searchInput" />
<div ng-show="searchInput">
<ul>
<li ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }}</li>
</ul>
</div>
</div>
</body>
</html>