I have tried to filter blank string item from ng-repeat. But didn't succeeded. Can someone please help me at this.
JSFiddel Link
HTML Code:
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details | filter: filter2 ">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
JS Code:
function myCtrl($scope) {
$scope.details = [{
name: 'Bill',
shortDescription: null
}, {
name: 'Sally',
shortDescription: 'A girl'
},{
name: 'Tally',
shortDescription: ''
}];
}
function filter2(detail){
if (item.shortDescription.length == 0){
return true;
}
else{
return false;
}
}
Expected Result:
/*
Expected Result
Bill
Sally
*/
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details" ng-if="detail.shortDescription">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
fiddle
Related
I am stuck in a situation where i have to find the data using filter in ng-repeat
Situation :
Data is an array of objects with name and status and status has property a
now want to filter objects having property status.a as started and in progress
I have tried multiple solution
Sol1:
ng-repeat="item in items | filter: {status :{a:'Not Started'},status: {a:'In Progress'}}
returns result : status.a of In Progress only
Sol2:
<p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">
{{ item.name }}
</p>
returns same result : status.a of In Progress only
html
<div ng-controller="mainCtrl">
<h1>List 1</h1>
<ul>
<li class="clearfix">
<label>
<input ng-model="tracks.ns"
ng-true-value="'Not Started'"
ng-false-value="''"
type="checkbox">
Not started
</label>
</li>
<li class="clearfix">
<label> <input ng-model="tracks.ip" ng-true-value="'In Progress'" ng-false-value="''" type="checkbox">In-progress </label>
</li>
<li class="clearfix">
<label> <input ng-model="tracks.do" ng-true-value="'Done'" ng-false-value="''" type="checkbox">Done </label>
</li>
</ul>
{{tracks.ns}}
<p ng-repeat="item in filteredItems">{{ item.name }}</p>
<h1>List 2</h1>
<p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">{{ item.name }}</p>
</div>
js
$scope.items = [{
name: "Alvi",
status: {
a: 'Not Started'
}
}, {
name: "Krane",
status: {
a: 'Done'
}
}, {
name: "Tate",
status: {
a: 'In Progress'
}
}, {
name: "Lorus",
status: {
a: 'In Progress'
}
}];
$scope.tracks = {ns: '',ip: '',done : ''}
Questions:
Can I achieve the desire result without custom filter ?
If yes than how without custom filter?
plunker: http://plnkr.co/edit/njsoPu1LHLmNmEx6lCew?p=preview
Use a function in the filter expression:
<p ng-repeat="item in items | filter : customFn">
{{ item.name }} {{ item.status }}
</p>
JS
$scope.customFn = function(value, index, array) {
console.log(value, index, array);
if (!value) return true;
if (value.status.a == 'Not Started') return true;
if (value.status.a == 'In Progress') return true;
//else
return false;
}
For more information, see AngularJS Filter Component Reference - filter
The DEMO on PLNKR
I’m trying to toggle the visibility of a div in angular
This is my view:
<div ng-repeat="item in data | orderBy:'address' | groupBy:'address'" >
<h5 onclick="toggle_visibility('item1');">{{item.address}}</h5>
<div id="item1">
<ul>
<li>First Name: {{item.firstname}} </li>
</ul>
</div>
In controller:
$scope.data = [
{
firstname: "user",
address: “address1”
},
{
firstname: "user1",
address: “address2”
},
{
firstname: "user2",
address: “address1”
}
];
The issue is when I click on any address header it hides or shows the first name within the first header and it should be when I click on the address header it shows or hides the first name within that address header that I clicked on it. How can I fix this?
Html
<div ng-repeat="item in data | orderBy:'address' | groupBy:'address'" >
<h5 ng-click="toggle_visibility(item);">{{item.address}}</h5>
<div ng-hide="item.invisible">
<ul>
<li>First Name: {{item.firstname}} </li>
</ul>
</div>
JS
$scope.toggle_visibility = function(item) {
item.invisible = !item.invisible
}
add additional boolean property to array and assign that property to ng-hide. then inside click function change the boolean value of that property.
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = [
{
firstname: "user",
address: "address1",
hideAddress : false
},
{
firstname: "user1",
address: "address2",
hideAddress : false
},
{
firstname: "user2",
address: "address3",
hideAddress : false
}
];
$scope.toggle_visibility = function(item){
item.hideAddress = !item.hideAddress;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="item in data | orderBy:'address' " >
<h5 ng-click="toggle_visibility(item);">{{item.address}}</h5>
<div ng-hide="item.hideAddress">
<ul>
<li>First Name: {{item.firstname}} </li>
</ul>
</div>
</div>
</div>
I have the code here where I want to expand only one item at a time. I am not able to figure out the condition for this. Appreciate it if someone can point out what I might be missing.
function sample ($scope) {
$scope.procedures = [
{
definition: 'Procedure 1',
discharged: 23
},
{
definition: 'Procedure 2',
discharged: 2
},
{
definition: 'Procedure 3',
discharged: 356
}
];
}
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>
you need to store the previous selected Index to get things working .
html:
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{'hidden': !(curr == $index && showDetails)}">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>
code:
function sample($scope) {
$scope.showDetails = true;
$scope.fireIt = function(index) {
$scope.curr = index;
if($scope.prevIndex == index){ -- (1)
$scope.showDetails = !$scope.showDetails; return;
}
$scope.prevIndex = index ;
if(!$scope.showDetails) $scope.showDetails=!$scope.showDetails; -- (2)
}
$scope.procedures = [{
definition: 'Procedure 1',
discharged: 23
}, {
definition: 'Procedure 2',
discharged: 2
}, {
definition: 'Procedure 3',
discharged: 356
}];
}
working sample up here for grabs .
Note : Quoted points (1) & (2) are key .
You need to store the state for each procedure. Or you could put the procedure definition in your variable, something like :
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{ 'hidden': ! (showDetails && showDetails == procedure.definition) }">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{ 'hidden': ! procedure.showDetail }">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>
function sample ($scope) {
$scope.clickLink = function(idx){
for(var i=0;i<$scope.procedures.length;i++){
if(i != idx)
$scope.procedures[i].showDetail = false;
else
$scope.procedures[i].showDetail = true;
}
}
$scope.procedures = [
{
definition: 'Procedure 1',
discharged: 23,
showDetail:false
},
{
definition: 'Procedure 2',
discharged: 2,
showDetail:false
},
{
definition: 'Procedure 3',
discharged: 356,
showDetail:false
}
];
}
You can define an activeItem variable in the controller to hold the item to be shown. Then, you should assign the index of the element you click to that variable:
ng-click="showDetails = ! showDetails; $parent.activeItem = $index"
Then, you should check both values to show an item:
ng-class="{ 'hidden': ! ( showDetails && $parent.activeItem == $index )}"
Check out the jsfiddle below:
http://jsfiddle.net/asmKj/1190/
I'm struggling with angularjs! Here's the problem. I've a list of employees from different company to show. Data are like these:
[
{
name : "company1",
employees : [
{ name : "emp1"},
{...}
]
},
{ .. }
]
I show them using two ng-repeat:
<div ng-repeat="company in companies ">
<div class="header">{{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:search">
{{employee.name}}
</div>
</div>
Here we are, I want to avoid, during filtering the headers of company with no employees.
Hope you guys are smarter than me :)
<div ng-repeat="company in companies ">
<div class="header" ng-show="results.length>0"> {{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:search as results">
{{employee.name}}
</div>
Explaination: after filtering your filtered data will be stored in ressults , which we can use to decide whether to show company name or not
Try this, I also attached demo.
ng-show="(company.employees | filter:search).length"
var app = angular.module('app', []);
app.controller('myctrl', function() {
var vm = this;
vm.companies = [{
name: "company1",
employees: [{
name: "emp1"
}, {
name: "poiuy"
}, {
name: "asdf"
}]
}, {
name: "company2",
employees: [{
name: "ghj"
}, {
name: "jkl"
}, {
name: "ooo"
}]
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="myctrl as ct">
<input ng-model="ct.search">
<div ng-repeat="company in ct.companies ">
<div class="header" ng-show="(company.employees | filter:ct.search).length">{{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:ct.search">
{{employee.name}}
</div>
</div>
</div>
</body>
I have created a daterangefilter:
app.filter('dateRangefilter', function() {
return function(input,dateFrom,dateTo) {
return _.filter(input, function (d) {
return Date.parse(d.date) >= Date.parse(dateFrom) && Date.parse(d.date) <= Date.parse(dateTo);
});
}
});
However when I try to filter my list I get an error:
<div ng-controller="Controller">
<ul>
<li ng-repeat="item in data | dateRange(dateFrom,dateTo) ">
{{item.name}}
</li>
</ul>
</div>
This is the data:
$scope.data = [{
"id": 1,
"name": "een",
"date":"12/08/2015"
}, {
"id": 2,
"name": "twee",
"date":"11/08/2015"
}];
plunkr: http://plnkr.co/edit/km23JzP925y95bVCPkqA?p=preview
You have to replace your line:
<li ng-repeat="item in data | dateRange(dateFrom,dateTo) ">
{{item.name}}
</li>
to:
<li ng-repeat="item in data | filter:dateRange(dateFrom,dateTo) ">
{{item.name}}
</li>
With this your code works but I don't know if it has to do whatever you want.
Regards.