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>
Related
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>
Is it possible to hide the row of ng-repeat using ng-if condition?
We are trying to restrict the displaying the ng-repeat row using ng-if condition. Here, I'm checking for the value five and three if it is not there then I need to hide the row.
angular
.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.comments = [{
type: 'one'
}, {
type: 'two'
}, {
type: 'three'
}, {
type: 'four'
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TodoCtrl">
<table>
<tr ng-repeat="data in comments">
<td ng-if="data.type == 'five' ">five</td>
<td ng-if="data.type == 'three' ">Three</td>
</tr>
</table>
</div>
</div>
Output:
five Three five Three five Three five Three
Expected output:
Three Three Three Three
It's always preferred to initialize your angular module with a name instead of making it blank.
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM. For more details see
below snippet... More information ngif
var myApp = angular.module('myApp', []);
myApp.controller('TodoCtrl', function($scope) {
$scope.comments = [
{
type: 'one'
}, {
type: 'two'
}, {
type: 'three'
}, {
type: 'four'
}
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TodoCtrl">
<div >
<table>
<tr ng-repeat="data in comments">
<td ng-if="data.type == 'five'"> five </td>
<td ng-if="data.type == 'three'"> Three </td>
</tr>
</table>
</div>
</div>
Yes, you can use multiple directives on the same element, thus achieving your desired output. Have a look at this example in which, on the same element, I placed ngRepeat, ngIf, ngClick and ngBind.
angular
.module('myApp', [])
.controller('MyCtrl', function() {
this.myList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
this.showNum = function(num) {
console.log('You clicked on', num);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<div ng-app="myApp">
<div ng-controller="MyCtrl as vm">
<ul>
<li ng-repeat="listItem in vm.myList"
ng-if="listItem % 2 === 0"
ng-click="vm.showNum(listItem);"
ng-bind="listItem"></li>
</ul>
</div>
</div>
I think that u did not add five in your comment array
$scope.comments = [ {type:'one'},{type:'two'},{type:'three'},{type:'four'},{type:'five'} ]
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>
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
});
I am new to Angular and I have this issue that I don't get solved. I have read today alot about good style and $scope soup but I could not find an answer to this.
It is the following, very easy example:
I have a controller with an ng-repeat inside and an input with a change-event.
<div id="searchbar" data-ng-controller="SearchCtrl">
<input id="search" autocomplete="off" data-ng-model="search" data-ng-keyup="getResults( search );" />
<div id="input_results">
<li data-ng-repeat="x in names">
{{ x.Country }}
</li>
</div>
</div>
When I assign some json directly from the controller function everything works fine.
var app = angular.module("myApp", []);
var SearchCtrl = function($scope, $http, HTTPService) {
console.log("Control opened");
$scope.names = [{
"Country": "TEXT"
}];
};
When I try to assign json out of the event, then I receive there "parent is null"
var app = angular.module("myApp", []);
var SearchCtrl = function($scope, $http, HTTPService) {
var _this = this;
console.log("Control opened");
$scope.getResults = function(searchstring) {
console.log("Execute search: " + searchstring);
$scope.names = [{
"Country": "TEXT"
}];
_this.getResults(searchstring, $scope, $http);
};
};
I don't know how I can pass the correct scope to getResults() or how to solve this issue. Additionally I have read that it is best to use dots in model names like SearchStrl.search to avoid shadowing.
I am also confused about the behaviour, when I change $scope.search it works fine inside the getResult() function, but why not with the ng-repeat.
It would be nice if somebody could explain me the reason for this behaviour.
Thank you.
Your ng-repeat code fails to work because he doesn't has an array to repeat on through.the code only creates the array after you activated 'getResults' function.
in your controller you shold have something like this:
app.controller('CTRL1', function($scope){
$scope.names = [{
"Country": "TEXT"
}]; //your array
$scope.getResults = function(search) {
//your search code.
}
})
I can see you're trying to make a list of items with a search. instead of the above code I will suggest you do as followed:
<div data-ng-controller="SearchCtrl">
<input data-ng-model="search" /> <!-- creates a search instance- -->
<div id="input_results">
<!--filter by search model -->
<li data-ng-repeat="x in names | filter: search">
{{ x.Country }}
</li>
</div>
and in your code:
$scope.names = [{
"Country": "TEXT"
}];