I have an array with 3 elements. Each element has a different key. How can I do to show only the name of the keys?
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="item in names">
{{item}}
</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.names=
[
{"joe":1},
{"pablo":2},
{"greic":3}
]
//output should be:
//joe
//pablo
//greic
});
http://jsfiddle.net/8wq4qmh0/
You can pull out key and values with (x,y) syntax. But since it's an array of objects, you need another ng-repeat.
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.names = [{"joe": 1},{"pablo": 2},{"greic": 3}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="item in names"> <!-- pull object from the array -->
<div ng-repeat="(key, val) in item"> <!-- pull key and value from the object -->
{{key}}
</div>
</div>
</div>
</div>
Related
I have two arrays. If ctrl.type == 'group' I want to do an ng-repeat
<div ng-repeat="category in ctrl.categories">
...
<div ng-repeat="item in category.group_items">...</div>
</div>
else, it should be
<div ng-repeat="category in ctrl.categories">
...
<div ng-repeat="item in category.data.other_items">...</div>
</div>
what's the best way to write this? I don't want to rewrite the ... as it's the same code.
Make a function that returns the array in your controller.
ctrl.getArray = () => {
if(ctrl.type === 'something') {
return ctrl.data.group_items;
}
return ctrl.data.other_items;
}
And in the view:
<div ng-repeat="item in ctrl.getArray()">...</div>
It can also be done using ng-switch. Below is my controller code where i have defined two arrays and also defined type on which your data will be shown.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type = 'something';
$scope.categories=[{ID:'1',Name:'Test 1'},{ID:'2',Name:'Test 2'},{ID:'3',Name:'Test 3'}];
$scope.group_items=[{ID:'1',Name:'Group 1'},{ID:'2',Name:'Group 2'},{ID:'3',Name:'Group 3'}];
});
Below is the html bindings.
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-switch="type">
<div ng-switch-when="group">
<div ng-repeat="item in categories">
<p>{{item.Name}}</p>
</div>
</div>
<div ng-switch-when="something">
<div ng-repeat="item in group_items">
<p>{{item.Name}}</p>
</div>
</div>
</div>
</div>
in my application, I have two controllers, in the first controller, I have a text input and ul so that I can filter list with filter:$rootScope.test, in the other controller I have only ul. What I want to is be able to filter ul from first(namesCtrl) and second controler (x) in parallel. I am using $rootScope as model, it is working on first controller, but not in the second. Can someone please show how to filter ul of first controller and second in same time ?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<body>
<div ng-app="myApp" >
<div ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" id="dSuggest" ng-model="$rootScope.test" ></p>
<ul>
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
</div>
<hr/>
<div ng-controller="x">
<ul>
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
</div>
</div>
<script>
$('#dSuggest').on("input", function(d){console.log($('#dSuggest').val())});
var app = angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
app.controller('x', function($scope, $rootScope) {
console.log($rootScope);
$scope.names = [
'Jani',
'Margareth',
'Hege',
'Joe',
];
})
</script>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>
Just remove your input out of the namesCtrl controller, like this for instance:
...
<div ng-app="myApp" >
<div >
<p>Type a letter in the input field:</p>
<p><input type="text" id="dSuggest" ng-model="$rootScope.test" ></p>
<ul ng-controller="namesCtrl">
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
...
Can I use a json file in ng-init to get data of the json file ?
I have this example but I want to replace my object by the json file.
<html>
<head>
<title></title>
</head>
<body ng-app>
<input type="text" ng-model="query"/>
<div ng-init="users=['coucou', 'ca va']"> <!--to be replaced by data contains in a json file-->
{{users}}
<ul>
<li ng-repeat="user in users">
{{user}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</body>
</html>
HTML
<body ng-app='app'>
<div ng-init="getData()" ng-controller="listController">
{{users}}
<ul>
<li ng-repeat="user in users">
{{user}}
</li>
</ul>
</div>
</body>
Controller:
var app = angular.module("app", []);
app.controller("listController", ["$scope", "$http",
function($scope, $http) {
$scope.getData = function() {
$http.get('test.json').then(function(response) {
$scope.users = response.data;
});
}
}
]);
DEMO
I try to repeat a multilayer array in angular,but may be using the method is not correct, this is the example:
var app = angular.module("app", []);
app.controller("index", ["$scope", function ($scope) {
$scope.list = [
{
list2: ["1111"]
},
{
list2: ["2222"]
},
{
list2: ["3333"]
}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="index">
<ul ng-repeat="l in list">
<li ng-repeat="item in l.list2">
<input type="text" ng-model="item" style="width: 300px;"/>
</li>
</ul>
<pre>{{list |json}}</pre>
</div>
What You are using is also correct.
You can simplify it using following implementation.
var app = angular.module("app", []);
app.controller("index", ["$scope", function ($scope) {
$scope.list = [
["1111"],["2222"],["3333"]
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="index">
<ul ng-repeat="l in list">
<li ng-repeat="item in l">
<input type="text" ng-model="item" style="width: 300px;"/>
</li>
</ul>
<pre>{{list |json}}</pre>
</div>
I am newbie in Angular js. Trying to use ng-repeat in following way
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.names = ["Emil", "Tobias", "rajeev", "sandeep","deepak"];
});
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div id="{{ 'tile' + $index }}" class="tile" ng-repeat="x in names">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>
It gives me structure like this
myNewTile
myNewTile
myNewTile
myNewTile
myNewTile
I wanna every row contain only two tiles. For third and fourth tile new row should be created and so on. something like this
myNewTile myNewTile
myNewTile myNewTile
myNewTile
You have two options:
First Solution
Just put the ng-repeat in your column div:
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6 col-xs-6" ng-repeat="x in names">
<div id="{{ 'tile' + $index }}" class="tile">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>
Bootstrap will take care of the rest.
OR Second Solution
The problem with the first solution will arise when the height of each columns are not same due to the content then the Bootstrap will not be able to perform proper alignment of the columns. So you can either use this one.
You can first collate your list and the put two ng-repeat inside there:
// An helper function to collate the list
Array.prototype.collate = function(size) {
var list = [];
angular.forEach(this, function(item, i) {
if (i % size === 0) {
list[Math.floor(i / size)] = [item];
} else {
list[Math.floor(i / size)].push(item);
}
});
return list;
};
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var names = ["Emil", "Tobias", "rajeev", "sandeep", "deepak"];
$scope.collatedNames = names.collate(2);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row" ng-repeat="names in collatedNames">
<div class="col-xs-6" ng-repeat="x in names">
<div id="{{ 'tile' + $index }}" class="tile">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>