I have a ng-repeat directive and I want to show different object values in fixed index positions.
data:
{
"recipe": {
"id":"0001",
"name":"soup",
"cat":[{"name":"dinner"}, {"name":"lunch"}, {"name":"breakfast"}]
}
I want it to show like..
ng-repeat:
1: (show cat.name: "breakfast") should only be shown at index 0
2: (dont show items that contains "breakfast", "dinner")
3: (dont show items that contains "breakfast") (show cat.name:
"dinner") - only show "dinner" at possition index 3
4: (dont show items that contains "breakfast", "dinner")
5: (dont show items that contains "breakfast", "dinner")
etc..
How should I manage this?
orderBy filter will achieve this but you need to help it.
I would give each cat item a displayOrder since it needs something.
Then just
<ul>
<li ng-repeat="x in data.recipe.cat | orderBy:orderMeals">
{{x.name}}
</li>
</ul>
With a controller doing something like
var app = angular.module('myapp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.data = {
"recipe": {
"id": "0001",
"name": "soup",
"cat": [{
"name": "dinner", displayOrder: 2
}, {
"name": "lunch", displayOrder: 1
}, {
"name": "breakfast", displayOrder: 0
}]
}};
$scope.orderMeals = function(item) {
console.log('item', item);
return item.displayOrder;
}
});
Notice I added displayOrders into your recipe object (see here)
try this
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.json = {
"recipe": {
"id":"0001",
"name":"soup",
"cat":[{"name":"dinner"}, {"name":"lunch"}, {"name":"breakfast"}]
}
};
$scope.json.recipe.cat.reverse();
}]);
.html
<body ng-app='myApp' ng-controller='myCtrl'>
<div ng-repeat ="t in json.recipe.cat" ng-if="t.name != 'breakfast' && t.name != 'dinner'">
here : {{t.name}}
</div>
see the plunker Code here
Related
onhstrong text:
When i click checkbox table id based column name shown in the right side using json data
JS
var app = angular.module('plunker', ['ui']);
app.controller('MyCtrl', function($scope) {
$scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
$scope.selected = {};
$scope.ShowSelected = function() {
$scope.records = $.grep($scope.records, function( record ) {
return $scope.selected[ record.Id ];
});
};
});
HTML
<div data-ng-controller="MyCtrl">
<ul>
<li data-ng-repeat="record in records">
<input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
</li>
</ul>
Show Selected
</div>
I have built a simple filter with angularJS, the html is like
<a class="filterbutton" ng-click="filters.grade = '7'">7 Grade</a>
<a class="filterbutton" ng-click="filters.grade = '6'">6 Grade</a>
<a class="filterbutton" ng-click="filters.grade = ''">X Clear Filters</a>
<ul>
<li ng-repeat="name in names | filter:filters">{{name.student}}, {{name.grade}} grade</li>
</ul>
And the controller:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.filters = { };
$scope.names = [{
"student": "Jimmy", "grade":7
}, {
"student": "Johny", "grade":7
}, {
"student": "Little Joe", "grade":6
}];
});
This works as expected. But what I wanted to do is to be able to check one of the filters and jump to another page with the same controller, so that when loaded the second page would be already filtered. So for example, if I click "filter by 7 grade in another page", it would jump to anotherpage.html and the output there would be already filtered.
I have made a plunkr here to illustrate what I mean. Thanks in advance!
Also you can try this simple solution:
HTML (add filter parameter to href attribute):
<a class="filterbutton" href="anotherpage.html?filter=7">Filter by 7 Grade in Another Page</a>
<a class="filterbutton" href="anotherpage.html?filter=6">Filter by 6 Grade in Another Page</a>
Javascript (get them from url and apply it)
app.controller('myCtrl', function($scope) {
$scope.filters = { grade : window.location.search.replace('?filter=','') };
$scope.names = [{
"student": "Jimmy", "grade":7
}, {
"student": "Johny", "grade":7
}, {
"student": "Little Joe", "grade":6
}];
});
I am getting some of objects from back-end. each of the object has the child array called 'phaseIds', it has multiple array of object, from the array i required to find the "name" existance according to the filter..
once i filtered, that object need to show in the page. I tried but i coun't get the result. any one help me with correct way to do this?
at present i am filter by students, but i am getting all the objects without filtered.
var app = angular.module('myApp', []);
var projects = [
{"name":"one", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"},
{id:"3",name:"teacher"}
]},
{"name":"two", "PhaseIds":[
{id:"1",name:"school"},
{id:"3",name:"teacher"}
]},
{"name":"three", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"}
]},
{"name":"four", "PhaseIds":[
{id:"1",name:"school"},
{id:"3",name:"teacher"}
]},
{"name":"five", "PhaseIds":[
{id:"1",name:"school"},
{id:"3",name:"teacher"}
]}
]
app.controller('MainCtrl', function($scope) {
$scope.projects = angular.forEach( projects, function (project) {
var filteredProject = project;
angular.forEach( project.PhaseIds, function ( phase ) {
if(phase.name.toLowerCase().indexOf('student') > -1 ){
//only required the students avilable projects
return filteredProject;
}
})
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<ul>
<li ng-repeat="project in projects">{{project.name}}</li>
</ul>
</div>
Live Demo
You needn't put the logic in your controller code. You can achieve it in your HTML snippet as well by using $filter. Check below example. You can make your filter structure as deeper as you want.
<ul>
<li ng-repeat="project in projects | filter:{ PhaseIds : { name : 'student' } }">{{project.name}}</li>
</ul>
Please check your plunker. I've updated it
I prefer the #Vineet solution but if you need to play with the Json from the controller the right code should be:
app.controller('MainCtrl', function ($scope) {
$scope.projects = [];
angular.forEach(projects, function (project) {
var filteredProject = project;
angular.forEach(project.PhaseIds, function (phase) {
if (phase.name.toLowerCase().indexOf('student') > -1) {
//only required the students avilable projects
$scope.projects.push(filteredProject);
}
})
})
});
You can see the solution here - http://plnkr.co/edit/seIfZlhIbUnYMhWdEpGr
var filterProjectData = function(projects) {
var filteredProjects = [];
angular.forEach( projects, function (project) {
angular.forEach( project.PhaseIds, function ( phase ) {
if(phase.name.toLowerCase().indexOf('student') > -1 ){
//only required the students avilable projects
filteredProjects.push(project);
}
});
});
return filteredProjects;
}
$scope.projects = filterProjectData(projects);
No brainier . I simply tweaked your foreach logic.
try this one
app.controller('MainCtrl', function($scope) {
$scope.projects = [];
angular.forEach( projects, function (project) {
var filteredProject = project;
angular.forEach( project.PhaseIds, function ( phase ) {
if(phase.name.toLowerCase().indexOf('student') > -1 ){
//only required the students avilable projects
$scope.projects = $scope.projects.concat(filteredProject)
}
})
})
});
Hre is the Plunker
EDIT :
using concat you will get object structure like this as per your requirement.
[ {"name":"one", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"},
{id:"3",name:"teacher"}
]},
{"name":"three", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"}
]}
]
And using push you will get like this
[0: [{
"name": "one",
"PhaseIds": [{
id: "1",
name: "school"
},
{
id: "2",
name: "student"
},
{
id: "3",
name: "teacher"
}]
}],
1: [{
"name": "three",
"PhaseIds": [{
id: "1",
name: "school"
},
{
id: "2",
name: "student"
}]
}]]
i have function to remove item in multiple array angularjs. i use a factory like bellow
app.factory("array_obj", function () {
var currentUserIDs = {};
currentUserIDs.data = [];
currentUserIDs.city = [];
return currentUserIDs;
});
in controller have a function like this
$scope.deleteItem = function (index) {
currentUserIDs.city.splice(index, 1);
setUserID(); //insert data in url realtime
}
this work just for one array like city
i need a function to delete any item in array_obj
function simpleController($scope) {
$scope.data = {
"results1": [ { "id": 1, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] ,
"results2": [ { "id": 1, "name": "Test2" }, { "id": 2, "name": "Beispiel2" }, { "id": 3, "name": "Sample2" } ]
}
;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app>
<body ng-controller="simpleController">
<div data-ng-repeat="results in data">
<div data-ng-repeat="result in results">>
{{result.name}}</br>
</div>
</div>
</body>
</html>
Have Fun..!!!
In your controller:
$scope.all_results = data.results1.concat(data.results2);
In your view
<whatever ng-repeat="item in all_results">{{ item.id }} - {{ item.name }}</whatever>
You could work with an extra <div> with ng-repeat attribute in your HTML where in my example results is your data.
<div>
<div ng-repeat="result in results">
<div ng-repeat="item in result">{{item.name}}</div>
</div>
</div>
ok this work ... i have function to remove item in multiple array angularjs. i use a factory like bellow
app.factory("array_obj", function () {
var currentUserIDs = {};
currentUserIDs.data = [];
currentUserIDs.city = [];
return currentUserIDs;
});
in controller have a function like this
$scope.deleteItem = function (index) {
currentUserIDs.city.splice(index, 1);
setUserID(); //insert data in url realtime
}
this work just for one array like city
i need a function to delete any item in array_obj
I have a multi check box application which requires me to have multiple filters. I have been unable to use multiple filters even if I try to hard code an array to filter on. Here is an example I have created to try to make this work.
Working Example
HTML MARKUP:
<body ng-app="app">
<div ng-controller="MainCtrl">
<div ng-repeat="item in data.sessions | IndustryFilter : data.sessions.industry ">
{{item.id}}
</div>
</div>
Javascript
var app = angular.module("app", [])
.controller("MainCtrl", function ($scope, MatchedFilterList) {
$scope.data = {"sessions": [{
"id": "a093000000Vhzg7AAB",
"industry": ["Automovtive"],
"sessionName": "Keynote",
},
{
"id": "a093000000zg7AAB",
"industry": ["Automovtive", "Retail"],
"sessionName": "Keynote2",
},
{
"id": "a093er000f00zg7AAB",
"industry": ["Automovtive", "Retail", "Consumer Goods"],
"sessionName": "Keynote3",
}
]};
}).filter("IndustryFilter", function (MatchedFilterList) {
return function () {
var filtered = [];
angular.forEach(MatchedFilterList.industry, function (item) {
filtered.push(item);
});
console.log("Filter: Filter " + filtered)
return filtered;
};
})
.factory("MatchedFilterList", function(){
var matchedFilterList = {};
matchedFilterList.industry = {
"Automotive": "Automotive",
"Retail" : "Retail"
};
return matchedFilterList;
});