how to set $Index to 1 every ng-repeat call - angularjs

<table class="table table-bordered">
<tr ng-repeat="x in AppliedJob">
<td>{{x.JobName}}</td>
<td> <span class="dropdown" ng-repeat="y in AppliedCenter| unique: 'Location' " ng-if="y.JobName==x.JobName">
{{$index+1}}){{y.Location}}
</span> </td></tr> </table>
Output of above code
1) Tester : 1)India 2)USA 3)Australia
2) Developer : 4)Japan 5)China
Required Output
1) Tester : 1)India 2)USA 3)Australia
2) Developer : 1)Japan 2)China
I want to set $Index to 1.

It happens because you're filtering using ng-if which is not affect array and it's indexes, it just removes the element from DOM. You should use filter instead of y.JobName==x.JobName comparison in ng-if so yours ng-repeat expression should be like this y in AppliedCenter | unique: 'Location' | filter: { JobName: x.JobName }. See example:
angular
.module('Test', [])
.controller('TestController', ['$scope', function($scope) {
$scope.cities = ["New York", "LA"];
$scope.jobs = [{ name: "QA", city: "New York"}, { name: "Frontend", city: "New York"}, {name: "Backend", city: "New York"}, {name: "DBA", city: "LA"}, { name: "QA", city: "LA"}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="Test">
<div ng-controller="TestController">
<table>
<tr ng-repeat="city in cities">
<td ng-bind="city"></td>
<td>
<span ng-repeat="job in jobs | filter:{city: city}">{{($index + 1) + ")" + job.name}} </span>
</td>
</tr>
</table>
</div>
</div>

Related

AngularJS: Filter only users which are not deleted

I am trying to filter and show only those users which are not deleted (Active)
where users is a table and deleted_at is the column(timestamp).
<tr ng-repeat="user in users | filter: {user.deleted_at == null}" ng-class="{'success': userData.id == user.id }" style="background-color:{{'userData.color'}}" ng-if="selectedRole == '' || (user.group_list | lookup:GROUPS | lists:'name' | join).indexOf(selectedRole) != -1">
What am I doing wrong here?
Try like this. I hop it'll help you.
<tr ng-repeat="user in users | filter: {!user.deleted_at}" ng-class="{'success': userData.id == user.id }" style="background-color:{{'userData.color'}}" ng-if="selectedRole == '' || (user.group_list | lookup:GROUPS | lists:'name' | join).indexOf(selectedRole) != -1">
Just use filter : {deleted_at : null}
function myctrl($scope){
$scope.users = [
{"name":"Hardik Shah", "deleted_at" : null},
{"name" : "I am deleted", "deleted_at": "2343434"},
{"name": "I am not deleted", "deleted_at": null}
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app = "" ng-controller="myctrl">
<tr ng-repeat="user in users | filter : {deleted_at : null}">
<td>
{{user.name}}
</td>
</tr>
</table>
You can create a function to filter your array and pass it to the ng-repeat
function ctrl($scope){
$scope.users = [
{id: 1, deleted_at: null},
{id: 2, deleted_at: "12345"},
{id: 3, deleted_at: null}
]
$scope.userFilter = user => user.deleted_at
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app ng-controller="ctrl">
<tr ng-repeat="user in users | filter: userFilter">
<td>
{{user.id}}
</td>
</tr>
</table>

Angular : ng model array values got undefined in function on ng-click

I am trying to allow users to add quantity into text box. I have products array and each product contains its property. My service contains array list.
products = [{
id: 1,
name: 'X Product',
face: 'img/x_p.png',
available_size: 6,
color_available: 0,
sizes: ['10"', '20"', '30"'],
properties: [{size: '10"', mrp: '10$'},
{size: '20"', mrp: '15$'},
{size: '30"', mrp: '20$'}]
},
{
id: 2,
name: 'Y Product',
face: 'img/y_p.png',
available_size: 6,
color_available: 0,
sizes: ['10"', '20"', '30"'],
properties: [{size: '10"', mrp: '10$'},
{size: '20"', mrp: '15$'},
{size: '30"', mrp: '20$'}]
}]
Iterating through the products array. When user clicks on product it will display a product show page. where I am showing all the information for the product. For properties I am showing a table where user can add their quantity just after each size.
<div style="margin-bottom: 20px;">
<h4>
Product Detail
</h4>
<table>
<tbody>
<tr class="tableHeader">
<td>Size</td>
<td>MRP</td>
<td>Quantity</td>
</tr>
<tr ng-repeat="(key, property) in product.properties">
<td>{{ property['size'] }}</td>
<td>{{ property['mrp'] }}</td>
<td>
<input type="number" placeholder="QTY" ng-model="qty">
</td>
<td>
<a href="javascript:;" class="button" ng-click="addToCart(property['size'], qty)">
Add
</a>
</td>
</tr>
</tbody>
</table>
</div>
Question: So according to this table each row contains a button with name add. So after adding quantity user clicks on add button will them allow to add item in cart. here I am getting size in addToCart function but got undefined qty as it should be an array with its respective size. Though I am getting size. But I don't know how to do that.
$scope.addToCart = function(size, qty) {
alert($scope.qty)
}
I need a help.
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function() {
this.addToCart = function(property, qty) {
property["qty"] = qty;
}
this.product = {
id: 1,
name: 'X Product',
face: 'img/x_p.png',
available_size: 6,
color_available: 0,
sizes: ['10"', '20"', '30"'],
properties: [{
size: '10"',
mrp: '10$'
}, {
size: '20"',
mrp: '15$'
}, {
size: '30"',
mrp: '20$'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div style="margin-bottom: 20px;" ng-app="MyApp">
<div ng-controller="MyCtrl as ctrl">
<h4>
Product Detail
</h4>
<table>
<tbody>
<tr class="tableHeader">
<td>Size</td>
<td>MRP</td>
<td>Quantity</td>
</tr>
<tr ng-repeat="(key, property) in ctrl.product.properties">
<td>{{ property['size'] }}</td>
<td>{{ property['mrp'] }}</td>
<td>
<input type="number" placeholder="QTY" ng-model="qty">
</td>
<td>
<a href="javascript:;" class="button" ng-click="ctrl.addToCart(property, qty)">
Add
</a>
</td>
</tr>
</tbody>
</table>
<hr/>
{{ctrl.product.properties}}
</div>
</div>
I have noticed many times that the textbox won't bind to a normal scope variable like
$scope.qty
and binding it in view with ng-model="qty"
Please try using something like
$scope.qty = {
text:' '
}
and bind it as ng-model="qty.text" in the view
which will make sure that your textbox is actually bound.
Simple thing to fix this issue: init qty by $scope.qty = 0;

Sorting only certain arrays in nested ngRepeat

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>

ngTableParams Pagination with $http.get

Working on an AngularJS project and I've ran into the following problem:
When using locally stored / hard coded data, the pagination works fine.
When using remotely stored data, the pagination does not work properly.
I have searched quite a bit, but couldn't find the solution to my problem, so here are the code snippits:
The HTML:
<div ng-controller="ngTableCtrl">
<p><strong>Pagina:</strong> {{tableParams.page()}}</p>
<p><strong>Aantal weergegeven:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table table-striped" template-pagination="custom/pager">
<tr ng-repeat="x in names">
<td data-title="'Name'">{{x.Name}}</td>
<td data-title="'City'">{{x.City}}</td>
<td data-title="'Country'">{{x.Country}}</td>
</tr>
</table>
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<li ng-repeat="page in pages"
ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">« Previous</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next »</a>
</li>
<li>
<div class="btn-group">
<button type="button" ng-class="{'active':params.count() == 2}" ng-click="params.count(2)" class="btn btn-default">2</button>
<button type="button" ng-class="{'active':params.count() == 5}" ng-click="params.count(5)" class="btn btn-default">5</button>
<button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
<button type="button" ng-class="{'active':params.count() == 15}" ng-click="params.count(15)" class="btn btn-default">15</button>
</div>
</li>
</ul>
</script>
</div>
The JS:
app.controller('ngTableCtrl2', function ($scope, $http, $filter, ngTableParams) {
$http.get('http://www.w3schools.com/angular/customers.php')
.success(function (response) {$scope.names = response.records;});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
The webpage ( live version: http://178.62.232.175:8080/STANDARD/#/app/table/data ) shows all results in the first table (remote, from $http.get), whilst the second table, shows only the set results?! (2, 5, 10, 15)
The code is identical, except for:
<tr ng-repeat="x in names">
used to display remote data and is replaced by:
<tr ng-repeat="x in $data">
to display raw data as such:
var data = [{
Name: "Alfreds Futterkiste", City: "Berlin", Country: "Germany"},{
Name: "Ana Trujillo Emparedados", City: "México D.F.", Country: "Mexico"},{
Name: "Antonio Moreno Taquería", City: "México D.F.", Country: "Mexico"},{
Name: "Around the Horn", City: "London", Country: "UK"},{
Name: "B's Beverages", City: "London", Country: "UK"},{
Name: "Berglunds snabbköp", City: "Luleå", Country: "Sweden"},{
Name: "Blauer See Delikatessen", City: "Mannheim", Country: "Germany"},{
Name: "Blondel père et fils", City: "Strasbourg", Country: "France"},{
Name: "Bólido Comidas preparadas", City: "Madrid", Country: "Spain"},{
Name: "Bon app", City: "Marseille", Country: "France"},{
Name: "Bottom-Dollar Marketse", City: "Tsawassen", Country: "Canada"},{
Name: "Cactus Comidas para llevar", City: "Buenos Aires", Country: "Argentina"}
];
The pagination of the second table works as it should. What must I edit to make it work with remote data?
First of all your code is using the local data array as a source in ngTables getData callback and it is not clear what you are presenting as a comparison since you did not actually try AJAX Data Loading from the official examples .
Instead I would expect it to have an api call to the server using $http.get.
Remember for server side paging to work you must update the total count each time you query for data because they may have changed. Also you will have to consider a server side solution for sorting as well.
Here is a working sample using the github api as a test service.
var app = angular.module('main', ['ngTable']);
app.controller('MainCtrl', function($scope, $http, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1,
count: 5,
}, {
getData: function ($defer, params) {
var page = params.page();
var size = params.count();
var testUrl = 'https://api.github.com/search/repositories';
var search = {
q: 'angular',
page: page,
per_page: size
}
$http.get(testUrl, { params: search, headers: { 'Content-Type': 'application/json'} })
.then(function(res) {
params.total(res.data.total_count);
$defer.resolve(res.data.items);
}, function(reason) {
$defer.reject();
}
);
},
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<table ng-table="tableParams" class="table table-striped table-bordered table-hover table-condensed">
<tr ng-repeat="repo in $data">
<td data-title="'id'">{{repo.id}}</td>
<td data-title="'name'">{{repo.name}}</td>
<td data-title="'owner'">{{repo.owner.login}}</td>
</tr>
</table>
<div>

angularjs ng-repeat inside ng-repeat,the inside array can't update

I come from China,my English very poor,so I do a demo.how can I update array inside ng-repeat?
The HTML:
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table class="table">
<tr ng-repeat="user in users">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td>
{{user.spms|json}}
<div ng-repeat="u in user.spms">
<span ng-bind="u"></span>
<input type="text" ng-model="u" ng-change='updateArray($parent.$index, $index, u)'>
</div>
</td>
</tr>
</table>
</body>
The JS:
var app = angular.module('main', []).
controller('DemoCtrl', function($scope) {
$scope.users = [{
name: "Moroni",
age: 50,
spms: [
6135.7678,
504.4589,
2879.164,
669.7447
]
},
{
name: "seven",
age: 30,
spms: [
34135.7678,
5034.42589,
22879.1264,
63469.72447
]
}
];
$scope.updateArray = function(parent, index, u) {
$scope.users[parent].spms[index] = u * 1; // multiply by one to keep the value a Number
}
})
There are issues here are every update is changing the scope, so you can only change one time them click then change - so I would recommend add a update values button and implementing more or less the same logic to update the array values.
DEMO

Resources