Get 2 json files from backend , and need to mix it !
First ng-repeat:
<p ng-repeat="category in categories track by category.id" >
{{ category }}
</p>
result
{"id":"Category-1"}
{"id":"Category-2"}
{"id":"Category-3"}
Second ng-repeat:
<p ng-repeat="game in gamesList track by game.id">
{{ game }}
</p>
result
{"Category-id":"1","title":"Game-1"}
{"Category-id":"1","title":"Game-2"}
{"Category-id":"2","title":"Game-3"}
{"Category-id":"3","title":"Game-4"}
{"Category-id":"3","title":"Game-5"}
I need to mix this 2 values and get something like this:
Category-1
Game-1
Game-2
Category-2
Game-3
Category-3
Game-4
Game-5
You do not have to mix both json, you can just use the 2nd json and use GroupBy Filter
DEMO
angular.module('datepickerBasicUsage', ['angular.filter'])
.controller('AppCtrl', function ($scope) {
$scope.gamesList = [{"Categoryid":"1","title":"Game-1"},
{"Categoryid":"1","title":"Game-2"},
{"Categoryid":"2","title":"Game-3"},
{"Categoryid":"3","title":"Game-4"},
{"Categoryid":"3","title":"Game-5"}];
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" style='padding: 40px;'>
<ul ng-repeat="(key, value) in gamesList | groupBy: 'Categoryid'">
<h3> Category: {{ key }} </h3>
<li ng-repeat="player in value">
{{ player.title }}
</li>
</ul>
</div>
</body>
</html>
Related
How can i replace multiple chars in string in ng repeat in angularjs ?
Here Is My Code and its not working.
i want to replace the #,_,. from the string.How can i replace multiple chars in string.Here Is My Code.
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li type="1" ng-repeat="x in names | filter:test">
{{ x.replace(/#|_/./g,'') }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
"Jana#ai.mkv",
'Car.l.mkv',
'Mar##gareth.mkv',
'Hege.mkv',
'Jo_e.mkv',
'G__ustav.mkv',
'Birgit.mkv',
'Mary.mkv',
'Kai.mkv'
];
});
</script>
</body>
You can use a function and apply the logic to replace the # inside the function.
DEMO
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.getText = function(obj){
return obj.replace(/#|_|\./g, '');
};
$scope.names = [
"Jana#ai.mkv",
'Car.l.mkv',
'Mar##gareth.mkv',
'Hege.mkv',
'Jo_e.mkv',
'G__ustav.mkv',
'Birgit.mkv',
'Mary.mkv',
'Kai.mkv'
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li type="1" ng-repeat="x in names | filter:test">
{{ getText(x) }}
</li>
</ul>
</div>
Correct your regex first. Looks like it should be
/#|_|\./g
Write a method inside the controller and call it inside the mustach template. For instance
angular.module('App', [])
.controller('Ctrl', function() {
var vm = this;
vm.names = [
"Jana#ai.mkv",
'Car.l.mkv',
'Mar##gareth.mkv',
'Hege.mkv',
'Jo_e.mkv',
'G__ustav.mkv',
'Birgit.mkv',
'Mary.mkv',
'Kai.mkv'
];
vm.replace = function(value) {
return value.replace(/#|_|\./g, '');
};
});
<div ng-app="App" ng-controller="Ctrl as vm">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in vm.names | filter: test">
{{ vm.replace(x) }}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
So I have a nested ng-repeat like so:
<div ng-repeat="data in flow" ng-init="$flowIndex = $index">
Index: {{ $index }}
<div ng-click="flow.splice($index, 1)">Delete me</div>
<div ng-repeat="inside_data in flow[$flowIndex]">
Inside index: {{ $index }}
</div>
</div>
I want to be able to delete index in my $flowIndex. However if I have something like this:
0
1
2
3
And I delete index 2. If I go and delete index 3, it isn't found because ng-init variable still things its at index 3 but really its not at index 2.
Does anyone know a work around?
You can get rid of $flowIndex, it's not necessary, you can use $parent.$index instead, when you are using ngRepeat it creates a child scope and $index is part of that scope. Also consider moving your deleting logic into the controller.
Controller:
$scope.delete = function ($index) {
$scope.flow.splice($index, 1);
};
Html:
<div ng-repeat="data in flow">
Index: {{ $index }}
<div ng-click="delete($index)">Delete me</div>
<div ng-repeat="inside_data in flow[$index]">
Inside index: {{ $parent.$index }} -> {{ $index }}
</div>
</div>
I believe you can get the parent index like so:
$parent.$index
As mentioned in this answer: passing 2 $index values within nested ng-repeat
That way you don't have to worry about your variable being out of sync with your current state.
I just tested your similar code with some dummy data strings and the delete appears to work. I made some updates to your code to better analyze it.
// Code goes here
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.flow = [
["test01","test02","test03"],
["test11","test12","test13"],
["test21","test22","test23"],
["test31","test32","test33"],
["test41","test42","test43"]
]
;
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="//opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<section ng-controller="MyController">
<div ng-repeat="data in flow">
Index: {{ $index }}
<div ng-click="flow.splice($index, 1)">Delete me [{{ $index }}]</div>
<div ng-repeat="inside_data in flow[$index]">
Inside index: {{ $index }} : {{ inside_data }}
</div>
<hr>
</div>
</section>
</body>
</html>
I'm pretty much new to AngularJS. In fact, this is my first day. What I'm trying to do here is to fetch data from a controller I made and show it in the view. But I don't know why, it's not simply working.
My data is a list of students. All I'm trying to do is to show the list of students in a list order and filter the list according to the name entered in a textbox.
My code is pretty simple:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
</head>
<body>
<h1>Hello!</h1>
Student Name:
<br />
<input type="text" ng-model="sname" /> {{ sname }}
<div id="mvvm_communication" class="container" data-ng-controller="simpleController">
<ul>
<li ng-repeat="stud in students | filter:sname | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
</ul>
</div>
<script>
function simpleController($scope)
{
$scope.students=[
{firstname:'Jordan',lastname:'Rains'},
{firstname:'Michael',lastname:'Jordan'},
{firstname:'John',lastname:'Doe'},
{firstname:'John',lastname:'Smith'},
{firstname:'Simcha',lastname:'Michelle'},
{firstname:'Sydney',lastname:'Rivers'},
{firstname:'Summer',lastname:'Rose'},
{firstname:'Georgia',lastname:'Schubert'},
{firstname:'Rosalie',lastname:'Fayadh'}
];
}
</script>
</body>
</html>
Here's a fiddle.
You need to register your controller!
var myApp = angular.module('myApp',[]);
myApp.controller('simpleController', ['$scope', simpleController]);
And then you also need to put a name into ng-app.
<html ng-app="myApp">
I've updated your JSFiddle:
HTML:
<div ng-app="app">
<div ng-controller="simpleController">
<h1>Hello Student!</h1> Student Name:<br/>
<input type="text" ng-model="sname" /> {{ sname }}
<div id="mvvm_communication" class="container">
<ul>
<li ng-repeat="stud in students | filter:sname | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
</ul>
</div>
</div>
</div>
Angular:
var app = angular.module('app', []);
app.controller('simpleController', function($scope) {
$scope.students=[
{firstname:'Jordan',lastname:'Rains'},
{firstname:'Michael',lastname:'Jordan'},
{firstname:'John',lastname:'Doe'},
{firstname:'John',lastname:'Smith'},
{firstname:'Simcha',lastname:'Michelle'},
{firstname:'Sydney',lastname:'Rivers'},
{firstname:'Summer',lastname:'Rose'},
{firstname:'Georgia',lastname:'Schubert'},
{firstname:'Rosalie',lastname:'Fayadh'}
];
});
you need to define an angular module:
angular.module('app', []).controller('simpleController', simpleController);
see jsFiddle
Let's say we have an array in our controller as follows:
$scope.elements = [
{
title: title-1,
desc: description-1
},
{
title: title-2,
desc: description-2
},
{
title: title-3,
desc: description-3
},
{
title: title-4,
desc: description-4
}
]
I wish to loop through the array so I can place the elements as follows:
<div class="row">
<div class="col-sm-6">
{{ elements[0].title }}
{{ elements[0].desc }}
</div>
<div class="col-sm-6">
{{ elements[1].title }}
{{ elements[1].desc }}
</div>
</div>
<div class="row">
<div class="col-sm-6">
{{ elements[2].title }}
{{ elements[2].desc }}
</div>
<div class="col-sm-6">
{{ elements[3].title }}
{{ elements[3].desc }}
</div>
</div>
...and so on.
This could be achieved if we could fetch two consecutive elements simultaneously via an ng-repeat and pass it to the directive. Can this be done? Also if so, how would the fetched array objects be handled inside the directive?
I'd use the $index property to do this. The hiding with ng-if is a little inefficient, if this is a huge repeat, you might want a more elegant solution.
<div class="row" ng-repeat="element in elements" ng-if="$index <= elements.length /2">
<div class="col-sm-6">
{{ elements[$index*2].title }}
{{ elements[$index*2].desc }}
</div>
<div class="col-sm-6" ng-if="elements[$index*2 + 1]"> //ng-if for if you want to remove last element if odd array.
{{ elements[$index*2 + 1].title }}
{{ elements[$index*2 + 1].desc }}
</div>
</div>
Seems like this would be as simple as creating another array to iterate over
$scope.TemplateArray = [
[0,1],
[2,3],
etc...
]
Then use this for your ng-repeat
array in TemplateArray
<div class="row">
<div class="col-sm-6">
{{ elements[array[0]].title }}
{{ elements[array[0]].desc }}
</div>
<div class="col-sm-6">
{{ elements[array[1]].title }}
{{ elements[array[1]].desc }}
</div>
</div>
Probably the best way to do this is going to be to pre-process your array into groups of however many columns you have and then ng-repeat over that array. So pre-process your elements into something that looks like:
$scope.processedElements = [
[{title:'1',desc:'1d'},{title:'2',desc:'2d'},{title:'3',desc:'3d'},{title:'4',desc:'4d'}],
[{title:'5',desc:'5d},....... ]
];
and then
<div ng-repeat="item in processedElements">
{{item[0].title}} {{item[1].title}} // etc. etc
</div>
I think this can solve your problem to a limit
var app = angular.module('plunker', []);
app.controller('example', function($scope) {
$scope.limit = 2;
$scope.elements = [];
$scope.$watch('limit', function() {
$scope.elements = elements;
});
elements = [{
title: 'title-1',
desc: 'description-1'
}, {
title: 'title-2',
desc: 'description-2'
}, {
title: ' title-3',
desc: 'description-3'
}, {
title: 'title-4',
desc: 'description-4'
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="example">
<input type="number" ng-model="limit">
<div class="row">
<div class="col-sm-6" ng-repeat="el in elements" ng-if="$index < limit">
{{el.title}} {{el.desc}}
</div>
</div>
<p>seperator</p>
<div class="row">
<div class="col-sm-6" ng-repeat="el in elements" ng-if="$index >= limit">
{{el.title}} {{el.desc}}
</div>
</div>
</div>
</body>
</html>
is it possible and how would one begin the process of what I am trying to do. I have managed to create this:
example2.html
<head>
<title> test2 </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<h2> Section Two </h2>
<div ng-app="" ng-controller="ModuleTwoController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in filtered = (countries | filter:test)">
{{ x.country }}
</li>
</ul>
<p> Items in list: {{filtered.length}} </p>
</div>
<script src="mod2.js"></script>
</script>
</body>
</html>
mod2.js
function ModuleTwoController($scope){
$scope.countries = [{country:'Argentina'},
{country:'USA'},
{country:'Brazil'},
{country:'Hong Kong'},
{country:'UK'},
{country:'Turkey'},
{country:'Rwanda'},
{country:'Federated States of Micronesia'},
{country:'India'},
{country:'South Africa'}
];
}
so far this filters down when i type in one of the countries. if i type in an 's' only the ones with s in the name are returned. i want my if statement to say 'if list size = 1' then display countries flag. if list size >1 display nothing.
is there a way to do this in html/js/css and is there a good if function within angular?
Sure, just check the length property:
<p>
Items in list: {{filtered.length}}
<span ng-if="filtered.length === 1">FLAG CODE HERE</span>
</p>
You can use the following:
<span ng-if="filtered.length == 1">
Show Flag
</span>