I was wondering how to print ids of items inside an array.
I have and array called localData, with a list of objects inside. Every object is a mini array of 3 strings.
In my ng-repeat when i set {{items in array}} it prints the content and not the id. How can i print only ids?
localData = {"-KRFLxEmRoS7M9gKDXVE":{"postBody":"1) remove lag 2) add animations",
"postTitle":"Top Title $$$","userName":"[Admin]"},
"-KRFM6Jm2wQemtl878Ur":"postBody":"Annanana","postTitle":"Ananaj",
"userName":"[Admin]"},"-KRFM7rcEe5K5PXkb29v":{"postBody":"Abshhsua","postTitle":"Ababjsjs","userName":"[Admin]"},
"-KRFM96LtmaXRTnUXJoV":{"postBody":"Gabshsysus","postTitle":"Bshshshshs","userName":"[Admin]"},
"-KRFMAnqecr85xUcOCuw":{"postBody":"Sbsbshshsusudu","postTitle":"Ushhshshs","userName":"[Admin]"},
"-KRFMCkO3JdhA_0MlwwM":{"postBody":"Hshshshs","postTitle":"Sjjsjsjs","userName":"[Admin]"},
"-KRFMLtDJsO0fGYA9JEO":{"postBody":"Fake",
"postTitle":"OMG EPICCCCCCOOOO","userName":"[Admin]"},
"-KRFMQBwIbK6s5lVMlbW":{"postBody":"Asdrobololo","postTitle":"Asdrubale","userName":"[Admin]"},
"-KRI7TVGM0U5emvwD0i7":{"postBody":"Htrsdvgh","postTitle":"Uutfcbuj","userName":"[Admin]"},"-KRITPhL8m-qCCO9y4vY":
{"postBody":"Iiiiiiiwwwwww","postTitle":"Jjjdhd","userName":"[Admin]"}}
angular.module('myapp', [])
.controller('PostsCtrl', function($scope) {
var object={"nm_questionario":{"isEmpty":"MSGE1 - Nome do Questionário"},"ds_questionario":{"isEmpty":"MSGE1 - Descrição do Questionário"},"dt_inicio_vigencia":{"isEmpty":"MSGE1 - Data de Vigência"}};
$scope.items = [];
angular.forEach(object, function (value, key) {
$scope.items.push(key);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="PostsCtrl">
<div ng-repeat="item in items">
{{item}}
</div>
</div>
Store the local data like below to get the id easily. Try this below.
angular.module('myapp', [])
.controller('PostsCtrl', function($scope) {
var accountservice=[{"id":"1","title":"Savings Account","services":[{"types":"ATM card request"},{"types":"loan request"}]},
{"id":"2","title":"Current Account","services":[{"types":"cheque book request"},{"types":"ATM card request"}]},
{"id":"3","title":"Demat Account","services":[{"types":"loan request"},{"types":"ATM card request"}]}];
$scope.accountservices = accountservice;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="PostsCtrl">
<div ng-repeat="(key,value) in accountservices">
<p>{{value.id}}</p>
<ul><li ng-repeat="account in value.services">{{account.types}}</li></ul>
</div>
</div>
Related
Right now my data structure is like
product = [{att1:'2',att2:'red',att3:'gold'},
{att1:'1',att2:'blue',att3:'wood'},
{att1:'2',att2:'green',att3:'plastic'},
{att1:'1',att2:'red',att3:'plastic'}]
And I have a filter on the web page, it has three parts: att1, att2, att3. The user doesn't have to choose options for every part.
For filter att1 it has 2 options: "1" and "2".
Filter att2 it has 2 options: "red" "blue" and "green"
Filter att3 it has 3 options: "gold", "wood" and "plastic".
I can get the options that are selected. For example:
{att1:['2'],att3:['gold','plastic']} or {att1:['1']}
My question is, how do I use product.filter to filter the product data?
Thanks!
You can use a custom filter function which is easy to use, I used att1 but you can expand it to all fields:
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.products = [{att1:'2',att2:'red',att3:'gold'},
{att1:'1',att2:'blue',att3:'wood'},
{att1:'2',att2:'green',att3:'plastic'},
{att1:'1',att2:'red',att3:'plastic'}];
$scope.filterFunction = function(element) {
return element.att1.match(/^Ma/) ? true : false;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<form class="form-inline">
<input ng-model="query" type="text"
placeholder="Filter by" autofocus>
</form>
<ul ng-repeat="product in products | filter:query">
<li>{{product}}</li>
</ul>
<ul ng-repeat="product in products | filter:filterFunction">
<li>{{product}}</li>
</ul>
</div>
</div>
I banged out the particular logic for this one, using the three nested loops isn't super great but it does do the job. I'm sure you can optimize this further by using some maps or something but I just went with the get it done by brute force approach :)
angular.module('myApp',[])
.service('ProductService', function(){
return {
products:[
{att1:'2',att2:'red',att3:'gold'},
{att1:'1',att2:'blue',att3:'wood'},
{att1:'2',att2:'green',att3:'plastic'},
{att1:'1',att2:'red',att3:'plastic'}
]
}
})
.controller('TestCtrl', function(ProductService){
this.ProductService = ProductService;
this.filterObject1 = {att1:['2'],att3:['gold','plastic']};
this.filterObject2 = {att1:['1']};
})
.filter('productFilter', function(){
return function(input,filterObj){
if(!filterObj){
return input;
}
var newArray = [];
var filterKeys = Object.keys(filterObj);
for(var i=0;i<input.length;i++){
var curElement = input[i];
innerLoops:
for(var j=0;j<filterKeys.length;j++){
var curKey= filterKeys[j];
for(var k=0;k<filterObj[curKey].length;k++){
var curFilterValue = filterObj[curKey][k];
if(curElement[curKey].match(curFilterValue)){
//We found a match keep this element and move on to checking the next one by breaking out of the inner loops that are checking particular keys/values
newArray.push(curElement);
break innerLoops;
}
}
}
}
return newArray;
};
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl as ctrl">
Unfiltered
<div ng-repeat="product in ctrl.ProductService.products|productFilter">
{{product}}
</div>
<hr/>
<strong>Filtered with: {{ctrl.filterObject1}}</strong>
<div ng-repeat="product in ctrl.ProductService.products|productFilter:ctrl.filterObject1">
{{product}}
</div>
<hr/>
<strong>Filtered with {{ctrl.filterObject2}}</strong>
<div ng-repeat="product in ctrl.ProductService.products|productFilter:ctrl.filterObject2">
{{product}}
</div>
</div>
testing:{"name":"Mohan,Rahul,Kanal,Rajesh,Gokul,Ramesh"}
Suppose i want first three name bind into label using angular ng-repeat.is it possible.Help me.Thanks in advance
Please review below code it may helpful to resolve your issue.
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in arr | limitTo:3">{{x}}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.arr = [];
$scope.cars = {name: "Audi,BMW,Dodge,Fiat,Ford,Volvo"};
$scope.arr = $scope.cars.name.split(",");
});
</script>
</body>
</html>
Try like this.
var app = angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.testing={"name":"Mohan,Rahul,Kanal,Rajesh,Gokul,Ramesh"}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<div ng-repeat="(key,value) in testing.name.split(',') | limitTo:3 ">
<p >{{value}}</p>
</div>
</div>
You can use ng-repeat:
<label>
<span ng-repeat="name in testing.name.split(',') | limitTo:3">
{{name}}<span ng-show="$index<2">,</span>
</span>
</label>
Another solution: This shows first three names in array format:
{{testing.name.split(',') | limitTo:3}}
Another solution: You can split the string and then join first three into another scope variable and bind to it.
var arr = $scope.testing.name.split(',');
$scope.labelStr = "";
for(var i=0; i<3; i++) {
$scope.labelStr += arr[i] + ',';
}
$scope.labelStr = $scope.labelStr.substr(0, $scope.labelStr.length-1);
for(var i=0;i<a.length;i++){
$scope.inputs=[
{name:a[i],value:b[i]}
];
}
this is my Javascript code i want to know how to write (ng-repeat) for arrays
Your JS is invalid, will produce length 1 array. Replace it with this:
$scope.inputs=[];
for(var i=0;i<a.length;i++){// be sure that a.length >=b.length
$scope.inputs.push({name:a[i],value:b[i]}); // push will add new entry to your inputs array.
}
The you can use it in ng-repeat:
<div ng-repeat="entry in inputs"> {{entry.name}} : {{entry.value}} </div>
You don't write loops surrounding a global variable. You leave the variable by itself and then you call the loop. Later you just use the global variable in the html code.
I made a cool snippet so you understand how it works:
angular.module('demo', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.inputs = [];
var a = ['name1', 'name2', 'name3'];
var b = [133,233,456];
//this code has to be called somewhere else. It might be part of a function.
for(var i=0; i < a.length; i++){
$scope.inputs.push( {name:a[i],value:b[i]} );
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="item in inputs">
<input ng-model="item.name"/>
</li>
</ul>
<!--This is only to display the content of $scope.inputs -->
<pre>{{inputs | json}}</pre>
</div>
</div>
If you have an array in your controller, with a scope that is visible in your html
angular.module('appName').controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.inputs = [
key: value,
...
];
}
In your html you would use ng-repeat within the scope of the controller. You can use the ng-repeat directive on several different html tags, such as <ul> lists, a div, select dropdowns and more
<div ng-controller="mainCtrl">
<ul>
<li ng-repeat="item in inputs">{{item.key}} <!-- Prints 'value' --></li>
</ul>
</div>
The ng-repeat is only showing the first 2 elements of the array (there are 25). What is wrong?
I'm a newbie with Angular. I am lost with the cause of it, no errors in console. Any suggestions?
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts" track by $index>
<p>{{posts.data.children[$index].data.ups}}</p>
<p>{{posts.data.children[$index].data.title}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var vm = this;
vm.mydata = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.mydata = response.data;
$scope.posts = vm.mydata;
//console.log(vm.mydata);
//console.table(vm.mydata);
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
Final code corrected. This is a very basic script to manage the extraction of posts in the Reddit's front page and displayed it in descending order by upvotes. Thank you all for your help! See code below:
<!DOCTYPE html>
<html>
<!-- _________________________________________________________-->
<!-- Framework: AngularJs -->
<!-- Author: Vanessa Torres -->
<!-- Date: March 30, 2016 -->
<!-- Description: Reddit's Front page posts extraction -->
<!-- _________________________________________________________-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts.data.children | orderBy:'-data.ups'" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.data.title}}</p>
<p>{{post.data.url}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.posts = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
$scope.posts = response.data;
console.table(vm.mydata);
//
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
</body>
</html>
Because you are iterating over posts which have basically two properties only ups and title
Use:
<li ng-repeat="post in posts.data.children" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.title}}</p>
</li>
The HTML should be as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
This iterates inside the posts array and the value of each post keys (ups and title) is displayed. Please check the documentation for ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) for the correct format of using track by $index.
As a basic coding standard, you need not use var vm = this; along with $scope. If you are using the vm variable, then inside routes (or inside directives), where you associate each route (or directive) with a controller, you can add an extra field controllerAs for aliasing the controller. Use this alias name in the HTML code to access the vm variable. In your example, you can change it as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as postsCtrl">
<li ng-repeat="post in postsCtrl.posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
And in the scripts tag:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($http) {
var vm = this;
vm.posts = '';
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.posts = response.data;
}, function(response) {
vm.posts = 'Something went wrong';
});
});
</script>
here is my code , i dont know what mistake i am doing??? Is there a built in filter or function to sort array of integers or numbers??
<body data-ng-app="app" data-ng-controller="controller1" >
<div class="container">
<div class="row">
<input type="text" ng-model="searchbox" />
<li ng-repeat="num in numbers|filter:searchbox|orderBy:number">
{{num}}
</li>
</div>
</div>
<script type="text/javascript">
var app=angular.module('app', []).controller('controller1', ['$scope', function($scope){
$scope.numbers=[10,8,6,7];
$scope.number=function(data)
{
return data.sort();
}
}
]);
</script>
</body>
Check out this answer orderBy array item value in Angular ng-repeat
This means that you can do something like this:
app.controller('ctrl', ['$scope', function($scope){
$scope.numbers = [10,8,6,7];
$scope.identity = angular.identity;
}]);
And
<li ng-repeat="num in numbers | orderBy:identity">
{{num}}
</li>