AngularJS non-ascii property name support - angularjs

I don't know how to use non-ascii property name in AngularJS. I could print a value by using a['property_name'] instead of a.property_name, but I couldn't use the same way in 'orderBy'. If I click on 'name', sorting would happen, but if I click on '가격_price', nothing would happen and an error would show up in the console. How could I sort a table which has non-ascii name?
(There are Korean Characters in the code, but I think it makes sense.)
http://jsfiddle.net/k9h32mh9/
<div ng-app>
<div ng-controller="ListCtrl">
<table>
<tr>
<th><a ng-click="predicate='name'; reverse=false">name</a></th>
<th><a ng-click="predicate='가격_price'; reverse=false">가격(price)</a></th>
</tr>
<tr ng-repeat="item in items | orderBy:predicate:reverse">
<td>{{item.name}}</td>
<td>{{item['가격_price']}}</td>
</tr>
</table>
</div>
</div>
<script>
function ListCtrl($scope, $http) {
$scope.predicate = '-name';
$scope.items = [{name: "a", 가격_price:"1000"},
{name: "b", 가격_price:"2000"},
{name: "c", 가격_price:"1500"}];
}
</script>

While this is an issue with Angular, as per https://github.com/angular/angular.js/issues/2174, it can be worked around by specifying your own predicate function on the scope in order to access the property to sort by:
$scope.predicateProperty = 'name';
$scope.predicate = function(a) {
return a[$scope.predicateProperty];
};
And the HTML can be almost identical, just setting predicateProperty to the property name that you want to sort by (I've also removed references to "reverse" as it slightly complicates the issue)
<table>
<tr>
<th><a ng-click="predicateProperty='name';">name</a></th>
<th><a ng-click="predicateProperty='가격_price';">가격(price)</a></th>
</tr>
<tr ng-repeat="item in items | orderBy:predicate">
<td>{{item.name}}</td>
<td>{{item['가격_price']}}</td>
</tr>
</table>
You can see this working at http://jsfiddle.net/k9h32mh9/5/

Related

handling arrays in ng-repeat

I have a table and I need to display values in table from my JSON response. But I am unable to fetch the datas inside array.somewhere I am missing something.
JSON:
var jobs = [
{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},
{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}
]
HTML:
<tr ng-repeat ="item in jobs">
<td>{{item.jobs.title}}</td>
<td>{{item.jobs.description}}</td>
</tr>
You need to use $scope:
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
Hope it helps =)
There are two issues,
(i)You need to use $scope variable
(ii)You need to access item.title not item.jobs.title inside ng-repeat
You should access item
<tr ng-repeat="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
DEMO
The jobs array needs to be in $scope.
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
Keep these things in mind while playing with ng-repeat :
You have to use $scope.jobs object instead of var jobs as an array declaration in the controller which you are going to pass in ng-repeat for binding.
When you are going to iterate the array inside ng-repeat="item in jobs" no need to use again jobs to access the property of the objects(item) of an array(jobs).
Working Demo :
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.jobs = [
{
"id":1,
"title":"Need comedian",
"company":"AMS",
"description":"Need comedian"
},
{
"id":2,
"title":"Need Actor",
"company":"ERS",
"description":"Actor for Romantic Movie"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
</table>
</div>

Applying sort and filter to an Angular table

I downloaded an Angular demo app to learn and work my way through Angular basics. I am having issue with applying a filter and sort to a data table. I made it by referring some examples and not sure if it is correct.
My table is :
<div class="widget-content" ng-controller="getAllBenchersController">
<table ng-table="talentPoolList" show-filter="true" class="table table-striped table-bordered">
<tr ng-repeat="employee in data | filter: testFilter">
<td data-title="'#'">{{$index + 1}}</td>
<td data-title="'Employee ID'" sortable="'empno'" filter="{ 'empno': 'text' }">
{{employee.employee.employeeNo}}
</td>
<td data-title="'First Name'" sortable="'employee.employee.firstName'" filter="{ 'employee.employee.firstName': 'text' }">
{{employee.employee.firstName}}
</td>
</tr>
</table>
</div>
Controller :
myApp.controller('getAllBenchersController', ['$scope', 'employeeTalentPoolServices', function ($scope, employeeTalentPoolServices) {
employeeTalentPoolServices.getAllBenchers().then(function (result) {
$scope.data = result.data;
$scope.testFilter = function (item) {
return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked');
}
});
I have no clue how it works. Can anyone explain and provide a solution to fix this issue?
Thanks in advance
So to explain your demo example I've created a similar example to make you understand what's happening in your question.
We have a employees data with different statuses so when I want to display the list of employees I just want show 'fair' and 'good' so I've written a filter function passed to filter directive to tell what items should be displayed from the list.
If you observe the function it takes every item from list and checks for status to match the desired statuses for displaying.
Check out the demo for the same, hope this gives you a clear understanding on what's happening in your Demo app.
var app = angular.module('app',[]);
app.controller('getAllBenchersController',function($scope,$filter){
$scope.data = {employee:[
{'no':1,'name':'max','status':'bad'},
{'no':2,'name':'fox','status':'good'},
{'no':3,'name':'juno','status':'bad'},
{'no':4,'name':'pet','status':'fair'},
{'no':5,'name':'xyz','status':'good'},
{'no':6,'name':'shit','status':'bad'},
{'no':7,'name':'doggy','status':'fair'},
{'no':8,'name':'hmmm','status':'bad'}
]}
//this test filter is a function which allows me to decide which data should be displayed in this case I've used 'fair' & 'good' status employees to be displayed...
$scope.testFilter = function (item) {
return (item.status.toLowerCase() === 'good' || item.status.toLowerCase() === 'fair');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" class="widget-content" ng-controller="getAllBenchersController">
<table>
<tr ng-repeat="emp in data.employee | filter: testFilter">
<td>{{$index+1}} </td>
<td> {{emp.no}}</td>
<td>{{emp.name}} </td>
</tr>
</table>
</div>

Why isn't ng-repeat working here?

I have an array within my scope called checkedInChildren. The array contains just string values. I want a table to repeat for each string in the checkedInChildren array. Here is what I have so far:
<div ng-app="MyApp" ng-controller="myCtrl">
<div>
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="child in checkedInChildren">
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
Here is my controller:
app.controller("myCtrl", function($scope, $http) {
$scope.checkedInChildren = [];
$scope.addChildToCheckedIn = function(childName) {
$scope.checkedInChildren.push(childName);
}
});
No rows show no matter what names I add to that array. I omitted some code in the controller and some of the HTML, but I am debugging and clearly seeing values in the array. Any ideas?
You have to add {{child}} to bind each item to the view.
<tr ng-repeat="child in checkedInChildren">
<td>
{{child}}
</td>
</tr>
on your HTML you're referencing a different controller, put the proper name
<div ng-app="MyApp" ng-controller="checkInCtrl">...</div>
Demo
Working Plnkr
It is not displaying test because there is no item in your checkedInChildren array.
From Angular Doc:
The ngRepeat directive instantiates a template once per item from a
collection.
$scope.checkedInChildren = [];
$scope.addChildToCheckedIn = function (childName) {
$scope.checkedInChildren.push(childName);
}
$scope.addChildToCheckedIn('John');
You did not call addChildToCheckedIn method, that is why checkedInChildren array is empty.
hope that solve your problem.
Did you call the addChildToCheckedIn function? Try this. Hope this helps.

How to change $index for two ngRepeats with same input but different filters?

I've simulated my problem here.
Looking into this html, you can see that I am doing two ng-repeats with the same array as input, but different filters to each one:
<div ng-app='Lists'>
<div ng-controller='listsController'>
<table>
<tbody>
<tr ng-repeat='item in listValues | filter : xxx track by $index' ng-click="update($index)">
<td>{{item.ref}}</td>
<td>{{item.others}}</td>
</tr>
</tbody>
</table><hr/>
<table>
<tbody>
<tr ng-repeat='item in listValues | filter : yyy track by $index' ng-click="update($index)">
<td>{{item.ref}}</td>
<td>{{item.others}}</td>
</tr>
</tbody>
</table><hr/>
<div>{{updateIndex}}</div>
</div>
</div>
And my js code:
var appModule = angular.module('Lists', []);
appModule.controller('listsController', function($scope) {
$scope.listValues = [
{'ref' : '1', 'others' : 'abc..'},
{'ref' : '2', 'others' : 'def..'},
{'ref' : '1', 'others' : 'ghi..'},
{'ref' : '2', 'others' : 'jkl..'}
];
$scope.xxx = function(a){
return a.ref == 1;
};
$scope.yyy = function(a){
return a.ref == 2;
};
$scope.update = function(i) {
$scope.updateIndex = i;
};
$scope.updateIndex = "none";
});
The problem I'm stuck is that the update(index) function needs to change the object in the correct index of the listValues array. But as you can see clicking in the object of the second table gives me the $index of the first table.
How to work around this situation? Thanks in advance.
Using the $index is doomed to fail, even if you iterate once. $index is the index of the current item in the filtered array. And that index is different from the index of the same element in the original, non-filtered array.
If you want to modify an item on click, don't pass its index as argument. Pass the item itself:
ng-click="update(item)"
Instead of filters use ng-if which allows you to track items by index.Index will give exact click even list has duplicate items
<body>
<div ng-app='Lists'>
<div ng-controller='listsController'>
<table>
<tbody>
<tr ng-repeat="item in listValues track by $index" ng-click="update($index)" ng-if="xxx(item)=='1'">
<td>{{item.ref}}</td>
<td>{{item.others}}</td>
</tr>
</tbody>
</table><hr/>
<table>
<tbody>
<tr ng-repeat='item in listValues track by $index' ng-click="update($index)" ng-if="item.ref=='2'">
<td>{{item.ref}}</td>
<td>{{item.others}}</td>
</tr>
</tbody>
</table><hr/>
<div>{{updateIndex}}</div>
</div>
</div>
</body>

AngularJs sort object in ngRepeat

I'm using AngularJs and found a problem in ordering properties of a hash object in a template.
My object is like:
function TestCtrl($scope){
$scope.week = {'MONDAY': ['manuel'], 'TUESDAY': [], 'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'], 'FRIDAY': []}
}
Now, when I try to print these values in my template:
<div ng-repeat="(day, names) in week">
<span>{{day}}</span>
<ul> <li ng-repeat="name in names">{{name}}</li> </ul>
</div>
The order of the days printed is different: FRIDAY MONDAY THURSDAY TUESDAY WEDNESDAY
I tried to apply the filter orderBy but I think it doesn't work with objects, but just with arrays...
How can I order it?
As per AngularJS docs (version 1.3.20):
You need to be aware that the JavaScript specification does not define
what order it will return the keys for an object. In order to have a
guaranteed deterministic order for the keys, Angular versions up to
and including 1.3 sort the keys alphabetically.
A workaround is to use an array of keys:
function TestCtrl($scope){
$scope.week = {
'MONDAY': ['manuel'], 'TUESDAY': [],
'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'],
'FRIDAY': []}
$scope.weekDays = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"];
}
Use the array in view for iteration:
<div ng-repeat="day in weekDays">
<span>{{day}}</span>
<ul> <li ng-repeat="name in week[day]">{{name}}</li> </ul>
</div>
Update from AngularJS version 1.4.6 docs:
Version 1.4 removed the alphabetic sorting. We now rely on the order
returned by the browser when running for key in myObj.
There is no way to order hash objects like that. Not just in angular but in javascript in general.
I would convert the hash object to an array of objects, something like that:
$scope.week = [{day: 'MONDAY', names: ['manuel']}, {day: 'TUESDAY', names: []} ...];
And then change the view to something like that:
<div ng-repeat="day in week|orderBy:'day'">
<span>{{day.day}}</span>
<ul> <li ng-repeat="name in day.names">{{name}}</li> </ul>
</div>
This was fixed in Angular 1.4. As stated in the official Angular documentation below:
Version 1.4 removed the alphabetic sorting. We now rely on the order
returned by the browser when running for key in myObj
https://docs.angularjs.org/api/ng/directive/ngRepeat
There is actually a simple solution ...
The object keys are not ordered by default BUT if you create the object in browser from scratch your browser WILL know the order ;)
Example:
// test-1
var data = {};
data['a'] = 10;
data['b'] = 5;
data['c'] = 2;
Object.keys(data); // ["a", "b", "c"]
// test-2
var data = {};
data['b'] = 5;
data['a'] = 10;
data['c'] = 2;
Object.keys(data); // ["b", "a", "c"]
So simply ... recreate the object ... or use this simple filter:
.filter('orderObject', function () {
return function (object, reverse) {
var keys = Object.keys(object || {}).sort();
if (reverse) keys.reverse();
for (var ordered = {}, i = 0; keys[i]; i++) {
ordered[keys[i]] = object[keys[i]];
}
return ordered;
}
})
Example with regular objects:
<!-- MARKUP : DEFAULT -->
<table>
<tr ng-repeat="(key, value) in data">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
<!-- RESULT : test-1 -->
<table>
<tr>
<td>a</td>
<td>10</td>
</tr>
<tr>
<td>b</td>
<td>5</td>
</tr>
<tr>
<td>c</td>
<td>2</td>
</tr>
</table>
<!-- RESULT : test-2 -->
<table>
<tr>
<td>b</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>10</td>
</tr>
<tr>
<td>c</td>
<td>2</td>
</tr>
</table>
Example with sorted objects:
<!-- MARKUP : with FILTER orderObject:<reverse?> -->
<table>
<tr ng-repeat="(key, value) in data | orderObject">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
<!-- RESULT : test-1 without reverse -->
<table>
<tr>
<td>a</td>
<td>10</td>
</tr>
<tr>
<td>b</td>
<td>5</td>
</tr>
<tr>
<td>c</td>
<td>2</td>
</tr>
</table>
<!-- RESULT : test-2 with reverse -->
<table>
<tr>
<td>c</td>
<td>2</td>
</tr>
<tr>
<td>b</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>10</td>
</tr>
</table>
This question is old, but I ended up coming up with an answer to this that I thought might be an improvement on some of the previous answers.
Rather than simply convert the object into an array, it's much more DRY to create an angular filter that does that for you, and then ngRepeat or ngOptions over that.
As an example:
angular.module('myproject')
.filter('objOrder', function () {
return function(object) {
var array = [];
angular.forEach(object, function (value, key) {
array.push({key: key, value: value});
});
return array;
};
});
Then, with an object like:
$scope.degrees: {
ASC: "Associate's",
BAS: "Bachelor's",
MAS: "Master's",
MD: "M.D.",
JD: "J.D.",
PHD: "Ph.D",
OTH: "Other"
}
We could use it like so:
<select
ng-model="myDegree"
required
ng-options="item.key as item.value for item in degrees | objOrder"
>
</select>
This way, you neither have to create a new array and pollute $scope, nor do you have to go back and change your actual degrees object, which could have unwanted side-effects.

Resources