I have a array that needs to highlight duplicate values. This is what I have so far..
HTML
<tr ng-repeat="x in names | unique: 'names'" >
<td> {{ x }} </td>
</tr>
<style>
.duplicate{
background: yellow;
}
</style>
Controller:
angular.module('myApp', []).controller('nameCtrl', function($scope) {
$scope.names = [
'Bob',
'Dan',
'Philip',
'Philip',
];
});
EDIT: In the example above "Philip" would be highlighted and would have duplicate class
You can achieve it like this:
<div ng-app="MyApp">
<div ng-controller="MyController">
<table>
<tr ng-repeat="name in names | unique">
<td ng-class="{ 'duplicate': names.indexOf(name) !== names.lastIndexOf(name) }">{{name}}</td>
</tr>
</table>
</div>
</div>
This applies the duplicate class for elements where the indexOf returns a different value than the lastIndexOf. This can only happen for items that are in the array more than once.
JSFiddle available here.
If you don't want to filter out the duplicates, you can use this:
<div ng-app="MyApp">
<div ng-controller="MyController">
<table>
<tr ng-repeat="name in names track by $index">
<td ng-class="{ 'duplicate': names.indexOf(name) !== names.lastIndexOf(name) }">{{name}}</td>
</tr>
</table>
</div>
</div>
I think this should work.
<tr ng-repeat="(key, count) in names | count" >
<td ng-class="{your-highlight-class: count > 1 }"> {{ key }} </td>
</tr>
app.filter('count', function ( ) {
return function (collection) {
var result = {};
collection.forEach( function( elm ) {
if(!result[elm]) {
result[elm] = 0;
}
result[elm]++;
});
return result;
}
}]);
Related
I want to count iteration of ng-repeat, when condition match.
I've tried $index but it print for all itration/items in nested ng-repeat
Fiddle link :https://jsfiddle.net/gdr7p1zj/1/
<tbody ng-controller="MainCtrl">
<tr ng-repeat-start="a in test1">
<td>{{a.categoryName}}(count_here)</td>
</tr>
<tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId==b.categoryId">
<td>{{b.name}}</td>
</tr>
</tbody>
i want like this
category_one(4) <=item count 4 items in this category so 4 will display
item1
item2
item3
item4
category_two(2)
item5
item6
<!-- this is in controller -->
$scope.test1=[{
categoryId:'1',categoryName:'category one'
},
{
categoryId:'2',categoryName:'category two'
}]
$scope.test = [
{categoryId:'1',name:'cate 1 elem0'},
{categoryId:'1',name:'cate 1 elem1'},
{categoryId:'2',name:'cate 2 elem'}
];
});
An option is to create a function (getCount) in the controller which do the count, something like this:
$scope.getCount = function(categoryId) { // returns the count by matching by categoryId
return $scope.test.filter(function(element) { // first, filter elements in `test`
return element.categoryId === categoryId; // matching by categoryId
}).length; // then, return the count of how many results we got after the filter
}
And in the html call that function like this:
<tbody ng-controller="MainCtrl">
<tr ng-repeat-start="a in test1">
<td>{{a.categoryName }} ({{getCount(a.categoryId)}})</td> <!-- <-- call the function in order to display the count -->
</tr>
<tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId == b.categoryId">
<td>{{b.name}}</td>
</tr>
</tbody>
See a demo here: https://jsfiddle.net/lealceldeiro/v9gj1ok4/11/
Thanks for your help. But i get expected output without any functions call or filters
Here fiddle Link: https://jsfiddle.net/wk3nzj96/
htmlCode:
<div ng-app='myapp' >
<div ng-controller="MainCtrl">
<table ng-init="$scope.counter=0">
<tr ng-repeat-start="cate in mainCategory">
<td> {{cate.name}} ({{$scope.counter[$index]}})</td></tr>
<tr ng-repeat="itemsItr in items" ng-init="$scope.counter[$parent.$parent.$index]=$scope.counter[$parent.$parent.$index]+1" ng-if="itemsItr.mid==cate.id">
<td>{{itemsItr.name}}</td>
</tr>
<tr ng-repeat-end ng-if="false"></tr>
</table>
</div>
</div>
and ControllerCode:
(function() {
angular.module('myapp', []).controller('MainCtrl', function($scope) {
$scope.mainCategory = [
{ name: "categoryOne",id:1 },
{ name: "categoryTwo",id:2 }
];
$scope.items = [
{ name: "item1FromCateOne" ,mid:1 },
{ name: "item2FromCateOne",mid:1 },
{ name: "item3FromCateOne" ,mid:1 },
{ name: "item1FromCateTwo",mid:2 }
];
});
Is this Standard way to do this?
How can I use AngularJS filter for search functionality using this json structure?
$scope.jsonObj = {
idNo1: {
name: "Diljish",
age: 24
},
idNo2: {
name: "Shemeem",
age: 28
}
}
No JavaScript code is required.
You should create input for data to filter:
Filter: <input type="text" ng-model="yourFilter.name"/>
Then, in ng-repeat:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in persons | filter:yourFilter | orderBy:'name'">
<td>{{ person.name | uppercase}}</td>
<td>{{ person.age | lowercase}}</td>
</tr>
</table>
Where persons is your json object.
(function()
{
var yourController=function($scope) {
$scope.persons= [];
function init() {
$scope.persons={
idNo1: {
name: "Diljish",
age: 24
},
idNo2: {
name: "Shemeem",
age: 28
}}
}
init();
};
yourController.$inject=['$scope'];
angular.module('yourApp').controller('yourController',
yourController);
}());
Update:
It remains the same, if you use another json object:
<body ng-init="people=[{ name:'Shemmem' }, { name:'Diljish' }]">
Filter: <input type="text" ng-model="yourFilter.name"/>
<table>
<tr>
<td>Name</td>
<td>City</td>
</tr>
<tr ng-repeat="person in people | filter:yourFilter">
<td>{{ person.name }}</td>
<td>{{ person.city }}</td>
</tr>
</table>
</body>
If you want to filter it in a ng-repeat you can use a filter with a pipe "|":
<div ng-repeat="person in people | filter: customFilter">
</div>
Then, in the controller you define the customFilter:
$scope.customfilter = function (person) {
return (person.name == $scope.nameToBeFiltered)}
where "nameToBeFiltered" is the name you want to filter (you can ng-model that scope variable to an input in the view).
Now, if you want to filter somewhere else, maybe you are looking for a "Javascript: Find value in Json" rather than AngularJS.
Check out these:
Similar question: ng-repeat :filter by single field
Documentation: https://docs.angularjs.org/api/ng/filter/filter
Please find working code.
Had filter for "name"
(function(angular) {
'use strict';
angular.module('app', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.filtertext="";
$scope.jsonObj = {
idNo1: {
name: "Diljish",
age: 24
},
idNo2: {
name: "Shemeem",
age: 28
}
}
$scope.filterByName = function(items,filtertext) {
var result = {};
angular.forEach(items, function(value, key) {
if (value.name.toLowerCase().indexOf(filtertext) > -1) {
result[key] = value;
}
});
return result;
}
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-select-with-default-values-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<input type="text" ng-model="filtertext"/>
<hr>
<div ng-repeat="(k,v) in filterByName(jsonObj,filtertext)">
{{k}} {{v.name}}
</div>
</div>
</body>
</html>
I'm wondering if I can do something like the code below in AngularJS. The goal is to filter the array by all ids >= the search id. Can I do the search inline or does it have to be done as a custom filter in javascript?
<div style="margin-top:5px;margin-left:30px;">
<div>
<div>ID</div>
<span class="glyphicon glyphicon-search"></span>
<input type="text" ng-model="listFoodItems.searchid" />
</div>
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Discount</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr ng-repeat="row in listFoodItems.fullitemdescs | filter: EntryId >= searchid">
<td>{{row.EntryId}}</td>
<td>{{row.ItemDesc}}</td>
<td>{{row.ItemDisc}}</td>
</tr>
</tbody>
</table>
</div>
Best way make a custom filter like:
HTML
<div ng-app>
<div ng-controller="MyCtrl">
<input type="text" ng-model="searchid" />
<ul>
<li ng-repeat="person in people | filter:myFilter">
{{person.id}}
-
{{person.name}}
</li>
</ul>
</div>
</div>
JS
function MyCtrl($scope){
$scope.people = [
{id: 1, name: "Mark"},
{id: 2, name: "John"},
{id:3, name: "Joe"}
];
$scope.myFilter = function(item){
if(item.id >= $scope.searchid){
return item;
}
};
}
here its my fiddle with example: https://jsfiddle.net/javierif/mmoo3s8m/
First, create a function
$scope.lessThan = function(prop, val){
return function(item){
return item[prop] < val;
}
}
Next, in your ng-repeat
<tr ng-repeat="row in listFoodItems.fullitemdescs | filter: lessThan('EntryId', searchid)">
Original answer here:
https://stackoverflow.com/a/24081564/5141584
For the JSON below, if I want to get value of name for every object, how should I do it? {{x}} shows both value of name and type, but {{x.name}} or {{x.type}} doesn't work.
Also, If I use {{x}} to display name and type, how do I set a filter which can search value of name, but show the whole line, for example, I type A, then shows 'A file'.
JSON:
$scope.test = [{"name":"A","type":"file"},{"name":"B","type":"folder"},{"name":"C","type":"folder"}]
Html:
<input type="text" ng-model="searchtext">
<table>
<tr>
<th>NAME</th>
<th>TYPE</th>
</tr>
<tr ng-repeat="t in test">
<td ng-repeat="x in t | filter: searchtext">
{{x}}
</td>
</tr>
</table>
I dont know what searchtext is like, but I think this may give an idea:
<tr ng-repeat="x in test|filter:searchtext">
<td>
<span ng-bind="x.name"></span>
<span ng-bind="x.type"></span>
</td>
</tr>
You may also try this code. However, I have added a div element instead of a table.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="t">
<p><input type="text" ng-model="searchtext" /></p>
<div ng-repeat="x in data | filter:searchtext">
<div> {{ x.name + ' ' + x.type }} </div>
</div>
</div>
</body>
<script>
var myApp = angular.module('app', []);
myApp.controller('t', function ($scope) {
$scope.data = [{ "name": "A", "type": "file" }, { "name": "B", "type": "folder" }, { "name": "C", "type": "folder"}];
});
</script>
</html>
<tr ng-repeat="t in test">
<td ng-repeat="(key,value) in t | filter: searchtext">
{{value}}
</td>
</tr>
I would like to get which checkbox are selected by the user, i have this table but it dosen't work. is there any alternative ?
<table class="table table-bordered table-hover" style="max-height: 500px; overflow-y: auto" border="1">
<tr>
<th> Nom Exigence</th>
<th> Verifier</th>
</tr>
<tr data-ng-repeat="item in list" style="background-color: #F5F5F5">
<td>
{{item.Nom}}
</td>
<td>
<input type="checkbox" checklist-model="user.list" />
</td>
</tr>
</table>
verify
Close
when i try to log the $scoepe.user.list it shows me []
this is the modal controller
app.controller('ModalInstanceExigencesCtrl', function ($scope, $modalInstance, list) {
$scope.list = [];
$scope.user = [];
for (var i = 0; i < list.length; i++) {
$scope.list.push(list[i]);
}
console.log($scope.list);
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.verify = function () {
console.log($scope.user);
};
});
this Fiddle should do the job for u: jsfiddle example using checkboxes
Html-Code (pretty similiar to ur code):
<div ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in items">
<label class="checkbox">
<input type="checkbox" ng-model="items[$index].checked" />
{{item.name}}
</label>
</li>
</ul>
<hr class="space clearfix" />
{{items | json}}
JS-Code:
var app = angular.module('angularjs-starter', []);
function MainCtrl( $scope )
{
$scope.items = [
{ name:'foo', checked: true },
{ name:'bar' },
{ name:'baz' }
];
}
I just define one $scope Object called items. In my example each item has a name and optional a value checked, which determines wether a checkbox is checked or not.
Html is pretty forward, we repeat over all items and then bind our checkbox model ng-model="items[$index].checked". $index gives us the number of iteration, for example our first iteration binds to ng-model="items[0].checked"
Hope that helps.
You can try by using this way also
Html-Code:
$scope.collectNumbers = function (contact, index) {
if (contact.IsChecked) {
}
else{
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<tr class="" ng-repeat="contact in Contacts">
<td>
<label>
<input type="checkbox" ng-model="contact.IsChecked" ng-change="collectNumbers(contact,$index)" ng-checked="contact.IsChecked">
</label>
</td>
<td>{{contact.Name}}</a></td>
</tr>