I want a simple order by three fields:
name, status and owner in that order
Up until now i had this:
<tr ng-repeat='data in model.tableData|filter:model.search|orderBy:"name":model.sorted.name'>
(the model.sorted.name is toggling true false when clicked on), Now i saw i need to do something like this:
<tr ng-repeat="data in model.tableData|filter:model.search|orderBy:['name','status','owner']">
To deal with multiple fields, but how can i change it from,
for example, the status from true to false, like i did with the single one?
You can use '!' ie :
<tr ng-repeat="data in model|filter:model.search|orderBy:['name','!status','owner']">
please demo below
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.model = [{
'name': 'a1',
'status': true,
'owner': 'as'
}, {
'name': 'a1',
'status': false,
'owner': 'as'
}, {
'name': 'a1',
'status': false,
'owner': 'as'
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<h3> By status reverse </h3>
<table>
<tr ng-repeat="data in model|filter:model.search|orderBy:['!status','name','owner']">
<td>{{data.status}}|{{data.owner}}| {{data.name}}</td>
</tr>
</table>
<hr/>
<h3> By status</h3>
<table>
<tr ng-repeat="data in model|filter:model.search|orderBy:['status','name','owner']">
<td>{{data.status}}|{{data.owner}}| {{data.name}}</td>
</tr>
</table>
</div>
</div>
Related
Below I have added my data
[{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
}]
I want to make ng-repeat but I don't want to hard code any field (name, version, description, applicationenvironment)
How can I achieve this?
MY expectation :
IN TABLE it should come like this
Your array should be an object. So your structure simplifies quite a lot. Just extract key and values from your object and loop over it for each row. Then display key and values in separate columns per row:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.table = [{
"name": "testapp",
"version": "2.0",
"description": "testapp",
"applicationenvironment": "angularjs"
}]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key, value) in table[0]">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</div>
</body>
</html>
Although I don't recommend you to have this strucuture, you can do something like this:
angular.module('app', [])
.controller('appController', function () {
this.data = {
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
};
});
And your HTML would be something like this:
<div ng-app="app" ng-controller="appController as vm">
<ul>
<li ng-repeat="(key, value) in vm.data"> {{ key }} : {{ value }}</li>
</ul>
</div>
If you still need to have the data inside an array as you've wrote in the question, you would have to iterate over both the array and the object.
Now since your data source is an array, you need to do two nested ng-repeats
let app = angular.module("table",[]);
app.controller("tableCtrl", ["$scope", function($scope){
$scope.data = [{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
},
{
"name":"testapp 2",
"version":"2.1",
"description":"testapp 2",
"applicationenvironment":"angularjs"
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="table" ng-controller="tableCtrl">
<table ng-repeat="row in data">
<tr><td>Key</td><td>Value</td></tr>
<tr ng-repeat="(key,value) in row">
<td>{{key}}</td><td>{{value}}</td>
</tr>
</table>
</div>
Now if you do this, your data structure should yield the wanted result
You need to loop twice: Once through each the entire array of objects to access each object, and then inside each object to access individual key-value pairs.
I have posted the code below:
angular.module('app', [])
.controller('Controller1', function () {
this.data = {
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
};
});
<div ng-app="app" ng-controller="Controller1 as c1">
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="c in c1.data">
<table>
<tr ng-repeat="(key, value) in c">
<td> {{ key }} </td>
<td> {{ value }} </td>
</tr>
</table>
</tr>
</table>
</div>
Using AngularJS 1.3.4.
I have a html table that is being populated from an web api where I make an http request to get that data and populate my html table. My example json is as below:
{
id: 1,
firstName: "John",
lastName: "Rein",
status: 'available'
},
{
id: 2,
firstName: "David",
lastName: "Gumry",
status: 'not available'
}
Now I have a dropdown below the table, and I am using ui-select for it. I want to populate this dropdown based on the status in my json. For example in my json above I have 2 status available and not available. I want my dropdown to have these values. After I populate my dropdown, I want to filter my table based on the dropdown value that is selected. I have my dropdown as:
<ui-select tagging ng-model="selected" theme="bootstrap">
<ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="val in values | filter: $select.search track by val.value">
<div ng-bind="val.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
I have created my jsfiddle at:
https://jsfiddle.net/aman1981/wfL1374x/
I am not sure how can I bind the results from json to my DDL and filter my table.
You had a few issues that needed handling including redundant use of ng-app and ng-controller. Also, it seems as though ui-select works best using the ControllerAs syntax which is a preferred approach in general.
After these changes and others (too many to list), here's the working code:
angular.module('myApp', ['ui.select'])
.controller("PeopleCtrl", function($http) {
var vm = this;
vm.people = [];
vm.isLoaded = false;
vm.values = [];
vm.loadPeople = function() {
// *** I had to comment this out as it is not allowed in the SO Code Snippet but is fine for your code
//$http({
// method: 'POST',
// url: '/echo/json/',
// data: mockDataForThisTest
//}).then(function(response, status) {
// console.log(response.data);
// vm.people = response.data;
//});
vm.people = [{
id: 1,
firstName: "John",
lastName: "Rein",
status: 'available'
},
{
id: 2,
firstName: "David",
lastName: "Gumry",
status: 'not available'
}
];
vm.values = [...new Set(vm.people.map(obj => ({
value: obj.status
})))];
};
vm.selected = {
key: null,
value: null
};
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([{
id: 1,
firstName: "John",
lastName: "Rein",
status: 'available'
},
{
id: 2,
firstName: "David",
lastName: "Gumry",
status: 'not available'
}
]));
})
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.2.23/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="PeopleCtrl as ctrl">
<br>
<p> Click <a ng-click="ctrl.loadPeople()">here</a> to load data.</p>
<h2>Data</h2>
<div class="row-fluid">
<table class="table table-hover table-striped table-condensed">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in ctrl.people | filter: {status: ctrl.selected.value} : true">
<td>{{person.id}}</td>
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
<td>{{person.status}}</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div width="50px">
<ui-select tagging ng-model="ctrl.selected" theme="bootstrap">
<ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="val in ctrl.values | filter: $select.search track by val.value">
<div ng-bind="val.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
</body>
I'm trying to hide a td, when getting a value = 0,
I typed
<table>
<tr ng-repeat="row in typeData"
<td ng-if="row.AMOUNTPAID > 0">#{{row.AMOUNTPAID}}</td>
</tr>
</table>
The td is not hiding, I tried ng-show it works but ng-show works on the css, and an empty space still showing in the table with the td border.
I read about updating angular-js will fix the problem, i have 1.4.6 it has the ngif directive but not working.
Any help please ?
Hard to see how your data object is defined, please find a possible solution beneath. I've made a sample, provided with some dummy data.
Also see the JSFiddle
The problem in your example is that the tr close tag is missing at :
<tr ng-repeat="row in typeData"
VIEW
<div ng-app="myApp">
<div ng-controller="testCtrl">
<table>
<tr ng-repeat="row in data">
<td>{{row.name}}</td>
<td ng-if="row.amountpaid > 0">{{row.amountpaid}}</td>
<td ng-if="row.amountpaid <= 0">NO PAYMENT YET</td>
</tr>
</table>
</div>
</div>
CONTROLLER
var myApp = angular.module('myApp', []);
// controller
myApp.controller("testCtrl", function($scope) {
// set data
$scope.data = [{
'name': 'bot1',
'amountpaid': '145'
}, {
'name': 'bot2',
'amountpaid': '10'
}, {
'name': 'bot3',
'amountpaid': '5'
}, {
'name': 'bot4',
'amountpaid': '0'
}, {
'name': 'bot5',
'amountpaid': '0'
}];
})
I currently have a nested ngRepeat, where the inner loop iterates over a collection of items from its parent. An excerpt:
<div ng-repeat="person in persons">
(Irrelevant code here.)
<table>
<tr>
<th ng-click="setItemOrder('name')">Item name</th>
<th ng-click="setItemOrder('number')">Item number</th>
</tr>
<tr ng-repeat="item in person.items | orderBy:itemOrder">
<td>{{item.name}}
<td>{{item.number}}
</tr>
</table>
</div>
By clicking the table headers, I set the itemOrder-property in my controller to the name of the property I want orderBy to use:
$scope.setItemOrder = function(order){
$scope.itemOrder = order;
}
This all works fine, except that if I click the headers in one person-div, the item-tables in all person-divs get sorted on that property.
Is there a way to make ngRepeat only apply orderBy to entries that match a certain criteria - for instance a certain index? Or should I use a different approach?
Try setting the property to respective person instance as follows:
angular.module('test', []).controller('testController', function($scope) {
$scope.persons = [{
items: [{
name: 'test',
number: 2
}, {
name: 'test1',
number: 1
}]
}, {
items: [{
name: 'test3',
number: 5
}, {
name: 'test4',
number: 4
}]
}];
$scope.setItemOrder = function(person, order) {
person.itemOrder = order;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="test" ng-controller="testController">
<div ng-repeat="person in persons">
<table>
<tr>
<th ng-click="setItemOrder(person,'name')">Item name</th>
<th ng-click="setItemOrder(person,'number')">Item number</th>
</tr>
<tr ng-repeat="item in person.items | orderBy:person.itemOrder">
<td>{{item.name}}
<td>{{item.number}}
</tr>
</table>
</div>
You could add a ordering variable for each person and extend setItemOrder with the person object. Then you can call:
setItemOrder(person, 'name');
and then use it in the ngRepeat:
orderBy:person.itemOrder
angular.module('test', []).controller('testController', function($scope) {
$scope.ordersort=true;
$scope.orderfield='number';
$scope.persons = {
"items": [{
"name": 'test',
"number": 2
}, {
"name": 'test1',
"number": 1
}],
"item1": [{
"name": 'test3',
"number": 5
}, {
"name": 'test4',
"number": 4
}]
};
$scope.setItemOrder = function(person, order) {
$scope.orderfield=order;
person.itemOrder = order;
$scope.ordersort= !$scope.ordersort;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="test" ng-controller="testController">
<div ng-repeat="person in persons">
<table>
<tr>
<th ng-click="setItemOrder(person,'name')">Item name</th>
<th ng-click="setItemOrder(person,'number')">Item number</th>
</tr>
<tr ng-repeat="item in person | orderBy:orderfield:ordersort">
<td>{{item.name}}
<td>{{item.number}}
</tr>
</table>
</div>
I have modified your example. In this example table sorting is working perfectly. But It is not sorted the particular table when I click on that table header. Anyway to sort columns by specific table?
angular.module('test', []).controller('testController', function($scope) {
$scope.persons = [{
items: [{
name: 'test',
number: 2
}, {
name: 'test1',
number: 1
}]
}, {
items: [{
name: 'test3',
number: 5
}, {
name: 'test4',
number: 4
}]
}];
$scope.setItemOrder = function(person, order) {
person.itemOrder = order;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="test" ng-controller="testController">
<div ng-repeat="person in persons">
<table>
<tr>
<th ng-click="setItemOrder(person,'name')">Item name</th>
<th ng-click="setItemOrder(person,'number')">Item number</th>
</tr>
<tr ng-repeat="item in person.items | orderBy:person.itemOrder">
<td>{{item.name}}
<td>{{item.number}}
</tr>
</table>
</div>
I'm trying to display data from a JSON object.
<table ng-controller="statsCtrl">
<tr ng-repeat="stat in stats">
<td>{{ stat.name }}</td>
<td>{{ stat.id }}</td>
</tr>
</table>
With the following code
'use strict';
angular.module('stats', [])
.controller('statsCtrl', ['$scope', function($scope){
$scope.stats = [
{
name: 'player',
id: 1,
skills: [{
taming: 244,
mining: 25,
woodcutting: 100
}],
}
];
}]);
But the view which is index.html isn't displaying anything.
{{ stat.name }} {{ stat.id }}
And I get the following error.
Not sure why. What am I doing wrong?
First time messing with AngularJS.
http://plnkr.co/edit/2EEDYMYq9tSYwXWSfm1c?p=preview
Seems to work fine, you might be missing ng-app or there might be another error which breaks your code along the way.
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', function($scope){
$scope.stats = [
{
name: 'player',
id: 1,
skills: [{
taming: 244,
mining: 25,
woodcutting: 100
}],
}
];
}]);
With this HTML
<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr ng-repeat="stat in stats">
<td>Name: {{ stat.name }}</td>
<td>Id: {{ stat.id }}</td>
</tr>
</table>
</div>
</body>