Here I have a mongo collection like
"dashboard" : {
"todo" : {
"_id" : "GdfaHPoT7FXW78awi",
"_maxCount" : "1",
"_title" : "todo",
}
"task" : {
"_id" : "GdfaHPoT7FXW78awi",
"_maxCount" : "1",
"_title" : "task",
}
}
here task and todo are dynamic field names, I have looped the dashboard in an ng-repeat.
Now I want to know how to display details inside dashboard.
Go through it
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
$scope.dashboard = {
"todo" : {
"_id" : "GdfaHPoT7FXW78awi",
"_maxCount" : "1",
"_title" : "todo"
},
"task" : {
"_id" : "GdfaHPoT7FXW78awi",
"_maxCount" : "1",
"_title" : "task",
}
};
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
<div class="col-xs-4" ng-repeat="(itemName, item) in dashboard">
<div class="panel panel-info">
<div class="panel-head bg-info">{{itemName}}</div>
<div class="panel-body">{{item._title}} {{item._maxCount}}</div>
</div>
</div>
</div>
Could do something like
<div ng-repeat="(key1, value1) in dashboard">
{{key1}}
<div ng-repeat="(key2, value2) in value1">
{{key2}}: {{value2}}
</div>
</div>
Let's say you assign dynamic field name "todo" which is a string to a variable var1
you can access _maxCount of some docX as :
docX["dashboard"][var1]["_maxCount"]
Related
I have an array like this
$scope.mentors = [ {"name":"Jonathan", "status":0},
{"name": "Nathan","status":1},
{"name": "Chris","status":1},
{"name": "Brian","status":0}];
here my view code
<div ng-repeat="m in mentors">
<div ng-if="m.status == '1'">
<div>
{{m.name}}
</div>
</div>
</div>
and my result is :
Nathan and Chris
what can I do to just make it show Nathan or Chris
it must only show one result only
p/s: already try ng-show="$last" it did not work since Brian status is '0'
You can filter the array on statuses and then just take the first by checking against $index
angular.module('app', []).controller('myCtrl',function($scope){
$scope.mentors = [ {"name":"Jonathan", "status":0},
{"name": "Nathan","status":1},
{"name": "Chris","status":1},
{"name": "Brian","status":0}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="app">
<div ng-controller="myCtrl">
<div ng-repeat="m in mentors | filter : {status: 1}">
<div ng-if="$index == 0">
<div>
{{m.name}}
</div>
</div>
</div>
</div>
</body>
</html>
You could use the limitTo and filter
<div ng-repeat="m in mentors | filter: { status : '1'}| limitTo : 1">
<div>
{{m.name}}
</div>
</div>
There is no reason to use ng-repeat if you only need to display 1 item.
You should handle this in your controller. Create a new variable that will hold the mentor that you want to show.
To find Nathan, you can use Array#find(). It will return the first item that matches the condition status === 1
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.mentors = [{
"name": "Jonathan",
"status": 0
},
{
"name": "Nathan",
"status": 1
},
{
"name": "Chris",
"status": 1
},
{
"name": "Brian",
"status": 0
}
];
$scope.mentor = $scope.mentors.find(m => m.status === 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{mentor.name}}</h1>
</div>
ng-repeat is not listing different json values, instead it just displays the entire json file content in single list item
codepen
html:
<div ng-app="myApp">
<div ng-controller="myCtrl" class="container">
<h2>Basic List</h2>
<ul class="list-group">
<li class="list-group-item" ng-reapeat="student">
{{student}}
</li>
</ul>
</div>
</div>
All the json file content is in here. I just need the specific data to display on each list item.
For Example,
Student One
Student Two
Student Three
Student Four
Student Five
See image for issue
JS
<script>
var app = angular.module('myApp', []);
//$.ajax({url: app, crossDomain:true, dataType: 'json', type: 'GET'})
app.controller('myCtrl', function($scope, $http){
$http.get("student.json")
// $http.get("stud.json")
.then(function(response) {
$scope.student = response.data;
});
});
</script>
json
[
{
"name" : "Student One"
},
{
"name" : "Student Two"
},
{
"name" : "Student Three"
},
{
"name" : "Student Four"
},
{
"name" : "Student Five"
}
]
Your ng-repeat should be look like, to be more on that, you are missing the proper syntax and its ng-repeat not ng-reapeat
<li class="list-group-item" ng-repeat="stu in student" >
{{stu.name}}
</li>
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.student =
[
{
"name": "Student One"
},
{
"name": "Student Two"
},
{
"name": "Student Three"
},
{
"name": "Student Four"
},
{
"name": "Student Five"
}
];
});
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" >
<div class="container">
<h2>Basic List</h2>
<ul class="list-group">
<li ng-repeat="stu in student" >
{{stu.name}}
</li>
</ul>
</div>
</div>
</body>
I figured it out!
I fixed the syntax of the parameter in ng-repeat attribute.
So instead of the previous :
<ul class="list-group">
<li class="list-group-item" ng-reapeat="student">
{{student}}
</li>
Before
it should be like this :
<ul class="list-group" >
<li class="list-group-item" ng-repeat="student in student" >
{{student.name}}
</li>
Result:
After
I am trying to display list of names and when click on the name it will show the country for that name , and when click on other name it will hide the previous one and show the clicked one only,
i used ng-show with variable declared in the controller but it just keep showing each items i click on it without hiding the others, this is my code:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="x in records">
{{x.Name}}
<div ng-show="showDesc">{{x.Country}}</div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.showDesc = false;
$scope.records = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
</body>
</html>
ng-repeat has its own scope. So showDesc = true initializes a showDesc field in the ng-repeat scope. Each item has its own showDesc.
You want a global flag, common to all the items. And that can't just be a flag: you need to know which item must be expanded.
So just change the code to
$scope.expandedRecord = null;
$scope.expand = function(record) {
$scope.expandedRecord = record;
}
and
<div ng-repeat="x in records">
{{x.Name}}
<div ng-show="expandedRecord === x">{{x.Country}}</div>
</div>
In my html
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td></tr>
</table>
</div>
<a href="#" >Show or Hide Button</a>
In my controller
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.names =[
{
"Name" : "Max Joe",
"City" : "Lulea",
"Country" : "Sweden"
},
{
"Name" : "Manish",
"City" : "Delhi",
"Country" : "India"
}
];
});
I need to show the button if there are no records or 1 of the country is India. I'm working on this but no avail http://jsfiddle.net/junedc/n8ejgtwa/1/ Thanks for the help guys really appreciated.
Use an array filter as well as array length to set a boolean
var hasIndia = $scope.names.filter(function(item){
return item.Country === 'India'
}).length;
$scope.showButton = !$scope.names.length || hasIndia;
In view:
<a ng-show="showButton" href="#" >Show or Hide Button</a>
I have simple ng-repeat in my view that prints data from objects.
<div
ng-repeat="item in toDoItems |
orderBy: 'createdAt'
track by item.createdAt"
>
<b>Content:</b> {{item.content}}
</div>
The object that I am printing looks like this:
{
"content" : "some content",
"createdAt" : "1459401001460",
"completed" : false
},
{
"content" : "some content",
"createdAt" : "1459401001325",
"completed" : true
}
I only want to print items that have value false in "completed" propery.
I have tried this but it would give me error: ng-repeat only objects with specific property value - custom filter?
you can use this format of filter.
var myapp = angular.module('app', []);
myapp.controller('Main', function ($scope) {
$scope.data =[
{
"content" : "some content",
"createdAt" : "1459401001460",
"completed" : false
},
{
"content" : "some content",
"createdAt" : "1459401001325",
"completed" : true
},
{
"content" : "some content2",
"createdAt" : "1459401001460",
"completed" : false
},
{
"content" : "some content",
"createdAt" : "1459401001325",
"completed" : true
},
{
"content" : "some content3",
"createdAt" : "1459401001460",
"completed" : false
},
{
"content" : "some content",
"createdAt" : "1459401001325",
"completed" : true
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
<div ng-controller="Main">
<div >
<table class="table table-bordered">
<tr ng-repeat="d in data | filter: {completed: false }">
<td>{{d.content}}</td>
</tr>
</table>
</div>
</div>
</div>
Use this custom filter
app.filter('myFilter', function () {
return function (items) {
if (!items) {
return true;
}
if (items.length == 0) {
return items;
}
var newItems = [];
angular.forEach(items, function(item, index){
if(item.completed==true || item.completed=='true'){
newItems.push(item)
}
})
return newItems ;
};
});
And your HTML is:
<div ng-repeat="item in toDoItems | myFilter track by $index">
<b>Content:</b> {{item.content}}
</div>
<b ng-show='item.completed==false'>Content:</b>
<span ng-show='item.completed==false'>{{item.content}}</span>
Use angular filter plugin for this, Change your code like below
Inject
<div
ng-repeat="item in toDoItems | filterBy: ['completed']: true |
orderBy: 'createdAt'
track by item.createdAt"
>
<b>Content:</b> {{item.content}}
</div>