How can I change a value inside of ng-repeat after the repeat complete?

Question

I have a JSON which provides me a user's working experiences info. But country and city's are provided in a code format (TR,DE etc.) I am using ng-repeat to pass them into html like this

<div ng-repeat="e in experiences">
   <span>{{e.Name}}</span>
   <span ng-init="changeCodeToFullName(e.Country)">{{vm.CountryFullName[$index]}}</span>
</div>

I am using ng-init to convert Country Code to full name. changeCodeToFullName is an angular service written by me, Is this a correct method? If it is, I can't access the dom to change CountryFullName value. I tried to access them in JS file like vm.CountryFullName[0]="TEST" but it didn't worked. I need to use e.Country variable after, therefore I can't change the original .e.Country value.

How can I access a variable inside of ng-repeat after ng-repeat completed?

RustyDev · Accepted Answer · 2016-06-06T20:04:27.043

1

How about using a custom filter:

<div ng-repeat="e in experiences">
    <span>{{e.Name}}</span>
    <span>{{e.Country | changeCodeToFullName}}</span>
</div>

angular.module('App').filter('changeCodeToFullName', function(YourService) {
    return function(country) {
        return YourService.getFullCountryName(country)
    }
})

Here's an example: http://codepen.io/rustydev/pen/YWyqJB

edited Jun 06 '16 at 20:04

answered Jun 06 '16 at 19:46

RustyDev

1,094
1
9
18

I have tried filter but I see {} in html. My filter code is this: `app.filter('changeCountryCodeToFullName', function(testService) { return function(countryCode) { return testService.getCountryName(countryCode) .then(function (result) { console.log(222,result); return result; }) } }) ` I can see the result in console. – Sam Jun 06 '16 at 20:02
My service is using $q promise. Because I am getting these datas with a web API. I guess this is the problem. – Sam Jun 06 '16 at 20:08
http://stackoverflow.com/questions/19046641/angularjs-asynchronously-initialize-filter – RustyDev Jun 06 '16 at 20:13
I have watched this https://egghead.io/lessons/angularjs-stateful-filters-with-promises-in-angularjs and I solve the problem, thank you – Sam Jun 06 '16 at 20:48

score 0 · Answer 2 · answered Jun 06 '16 at 19:39

0

This is one way of doing it - but this ngInit value won't be reparsed if the list updates. Why not just format the data in the JSON request response - such as:

$http.get("json.json").success(function(data) {
    $scope.exeriences = data.map(function(obj) {
        //Format results;
        if (obj.Country == "DE") {
            obj.Country = "Germany"; //etc
        }
        return obj;
    });
});

answered Jun 06 '16 at 19:39

tymeJV

103,943
14
161
157

I can't because list is too long. I have to do it dynamically. I have another service to change code to full name. I want to use this service and list won't be updated dynamically. – Sam Jun 06 '16 at 19:40

How can I change a value inside of ng-repeat after the repeat complete?

2 Answers2