Is it possible to achieve dynamic array name, something like friends+$index. For example:
ng-repeat="friend in {{'friends'+$index}}"
The aim is to loop through different arrays: friends1 & friends2.
I tried everything, any combination, but without success. I also never came across to appropriate answers.
Thanks in advance.
You can do something like this.
http://jsfiddle.net/jigardafda/gw7f1qq0/1/
HTML
<div ng-app="myapp">
<div ng-controller="MyCtrl">
<div ng-repeat="(name, value) in frndslist">
{{name}}
<div ng-repeat="item in value.list">
{{item}}
</div>
</div>
</div>
</div>
JS
var myApp = angular.module('myapp',[]);
myApp
.controller('MyCtrl', function ($scope, $rootScope) {
$scope.frndslist = {
'friend1': {
name: 'x1 frnd',
list: [
"1.some1",
"1.some2"
]
},
'friend2': {
name: 'x2 frnd',
list: [
"2.some1",
"2.some2"
]
}
};
});
Here's another solution:
The HTML:
<div ng-app="App" ng-controller="AppController as controller">
<ul ng-repeat="friend in friends[index]">
<li>{{friend}}</li>
</ul>
</div>
Javascript:
var application = angular.module("App",[]);
application.controller("AppController",function($scope){
friends1 =["Name1", "Name2", "Name3", "Name4"];
friends2 =["Name5", "Name6", "Name7"];
$scope.friends = new Array();
$scope.friends.push(friends1);
$scope.friends.push(friends2);
//.......
$scope.index = 0; // in this example it can be 0 or 1
});
Related
I have got following html code:
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
and corresponding JS is :
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jabi',
'Cabi',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
the problem is when i type "bi" the filter returns me all the names containing "bi" however i want that filter should return only the names starting with "bi"(or watever is written in input textbox)
Since you need only the matching case/letters you have to create a custom filter as follows,
DEMO
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jabi',
'Cabi',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.onlyMatch = function (input, output) {
var Str = (input + "").toLowerCase();
return Str.indexOf(output.toLowerCase()) === 0;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test:onlyMatch">
{{ x }}
</li>
</ul>
</body>
I'm new to angular and was wondering is it possible to replace firstP inside ng-repeat Directive with a variable? I'm using AngularJS v1.6.6
ng-repeat="option in people['firstP']"
var people = {
"firstP": [
"",
"James",
"Jack",
],
"SecondP": [
"",
"Bill",
"Bob",
]
};
is it possible to replace firstP inside ng-repeat Directive with a variable?
Yes it's possible to replace firstP with a variable, after all you are just using the normal javascript object bracket notation in Angular.
Solution:
If you are trying to display the people object contents dynamically, then you can do it like this:
<div ng-repeat="(key, value) in people">
<select>
<option ng-repeat="option in people[key]">{{option}}</option>
</select>
</div>
First you need to loop over the people object keys, then for each key take the relevant array, then loop over each array to display its contents.
Note:
Note that we can replace the people[key] with value directly in the ng-repeat so it becomes ng-repeat="option in value".
I just used people[key] for the question purpose, to answer your specific question.
Demo:
Here's a live working Plunker.
I think you have to assign people object to $scope variable in order to access people object in your html.
HTML
<html ng-app="myApp" ng-controller="testCtrl">
<ul>
<li ng-repeat="name in people[element]">{{name}}</li>
</ul>
</html>
JS
var app = angular.module('myApp', []);
var testCtrl = function($scope){
$scope.element = 'firstP';
$scope.people = {
"firstP" : [
"Jake",
"James",
"Jack",
],
"SecondP" : [
"",
"Bill",
"Bob",
]};
}
app.controller('testCtrl',['$scope',testCtrl]);
to check https://jsfiddle.net/0zk4mfak/6/
As per my understanding,
Define the array in your controller with the $scope variable:
In controller:
app.controller('nameCtrl', function($scope) {
$scope.people = { firstP: ['james', 'jack'] };
});
In Html:
<div ng-controller="nameCtrl">
<ul>
<li ng-repeat="option in people.firstP">{{option}}</li>
</ul>
</div>
Try this.Hope it helps..!
Your code looks suspiciously like it will populate a select (dropdown) box. If that is the case use ng-options for Angular 1:
Given this array of items on the $scope:
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
This will work:
<select ng-options="item as item.label for item in items track by item.id"
ng-model="selected"></select>
$scope.selected = $scope.items[0];
or ngFor in Angular 2 like in this answer:
<select name="selectmake" [(ngModel)]="makeListFilter">
<option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">
{{muscleCar.name}}
</option>
</select>
I have a following code where I need to extract value of a at all the occurrence . What I have to do is use <span ng-repeat="x in carname"> as parent element, which I dont want to. How can I get value of a directly.
P.S.: $scope.carname can not be moderated
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = [
[{
"a": 1
}],
[{
"a": 2
}],
[{
"a": 3
}],
[{
"a": 4
}]
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat="x in carname">
<h1 ng-repeat="y in x">{{y.a}}</h1>
</span>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname =[
[{"a":1}],
[{"a":2}],
[{"a":3}],
[{"a":4}]
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="cn in carname">
{{cn[0].a}}
</div>
</div>
You can pretty much run one loop over the carname array, and since each element in that array is another array with just one element, get the first item cn[0] and then find the value by key, which is a.
And of course you can always use a nested ng-repeat or transform the data to some other format that makes it even easier to display.
If you have this structure then you can do like this
<span ng-repeat="x in carname">
<h1>{{x[0].a}}</h1>
</span>
Having trouble even writing the subject with my lack of english.
So here I go, I have for example two objects connected by the colorid:
$scope.fruits = {{name:"apple",colorid:"1"},etc};
$scope.colors = {{id:"1",value:"red"};
I've built a nice table with search and filter, using ng-repeat
ng-repeat="fruit in fruits | orderBy:sortType:sortReverse | filter:search"
What I am trying to achieve is ... when i search/filter for "red", to still view "apple"..
Edit: Obviously there is no connection in the ng-repeat with the second object "colors", the simplest solution would be to iterate each "fruit" and .push its color value (red) in the "fruits" object itself, so when searched/filtered for "red", the "apple" object is still visible in the search table.
But I assumed there may be some "angular-ish" solution for connected tables and their relationship ids.
If I understood well you are trying to "connect" your arrays. So you can have nested ngRepeat, as below:
(function() {
"use strict";
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.fruits = [
{
"name":"apple",
"colorid":1
},
{
"name":"mango",
"colorid":2
},
{
"name":"papaya",
"colorid":3
}
];
$scope.colors = [
{
"id":"1",
"value":"red"
},
{
"id":2,
"value":"green"
},
{
"id":3,
"value":"yellow"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-controller="MainCtrl">
<input type="text" class="form-control" ng-model="search" placeholder="Search...">
<ul ng-repeat="fruit in fruits track by $index">
<li ng-if="filtered.length" ng-bind="fruit.name"></li>
<ul>
<li ng-repeat="color in colors | filter: { id: fruit.colorid } | filter: search as filtered track by $index" ng-bind="color.value">
</li>
</ul>
</ul>
</body>
</html>
I have an array of objects set up something like this:
$scope.people = [{name:
{last:"Doe", first:"John"}},
{name:
{last:"Smith", first:"Joe"}}];
and I'm trying to do a live filter by text box of last names.
Here's the jsfiddle: http://jsfiddle.net/HB7LU/4287/
Any help would be nice. Thank you!
Edit: sorry I put in the wrong jsfiddle
Taking your fiddle as starting point, I'd say:
HTML
<div ng-controller="MyCtrl">
<input ng-model="search" ng-init="search = ''" placeholder="enter search" />
<div ng-repeat="person in people | filter:{name.last: search}">
{{ person | json }}
</div>
</div>
JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.people = [{ name: { last: 'Doe', first: 'John' } },
{ name: { last: 'Smith', first: 'Joe' } }];
}
Here's the plunker http://plnkr.co/edit/W46Fkj
So create a filter!
Building off your existing code:
myApp.filter("search", function() {
return function(people, startPhrase) {
if(!startPhrase) {
return people;
}
var filtered = [];
for(obj in people) {
if(people[obj].name.last.indexOf(startPhrase) == 0) {
filtered.push(people[obj]);
}
}
console.log(filtered);
return filtered;
}
});
Now, you can use a filter called "search" anywhere in the HTML. Call it like this:
<div ng-controller="MyCtrl">
<input ng-model="search.name.last"/>
<div ng-repeat="person in people | search:search.name.last">
{{person.name.last}}, {{person.name.first}}
</div>
</div>