CODEWITHSUNDEEP
javascripthtmlangularjs
jezzipin
jezzipin

Reputation: 4254

Outputting a KeyValue pair as a link in AngularJS

I'm having some issues outputting KeyValue pairs within an object as a link using AngularJS.

The object is constructed in C# using the following code:

Dictionary<int, string> page = new Dictionary<int, string>();
                updatedCountryNodesList.ForEach(x => page.Add(x.Id, x.Name));

When a request is made using a button in my HTML and Angular code this object is returned as part a general object to my Javascript code which is defined as follows:

public class ResponseMessage
    {
        public bool Result { get; set; }
        public string Message { get; set; }
        public Dictionary<int, string> Updates { get; set;}
    }

This object is then processed using the following function:

$scope.getCountries = function() {
            $scope.loadCountries = true;
            $scope.info = [];
            getMessage("Retreiving updates");
            AxumTailorMade.getCountries().success(function (data) {
                if (!data.Result) {
                    notificationsService.error("Error", data.Message);
                } else if (data.Result) {
                    getMessage("Content updated");
                    console.log(data.Updates);
                    $scope.link = data.Updates;
                    notificationsService.success("Success", data.Message);
                }
                $scope.loadCountries = false;
            });
        };

The following is the output of the console.log within this code:

 Object { 5118="Costa Rica", 5129="Ecuador and Galapagos", 4851="Venezuela"}

I am then using an ng-repeat as follows to loop through the keyValue pairs in the object and output a link using the key within the link href and the name within the link text.

<div class="info-window">
            <p ng-repeat="item in info track by $index">{{item}}</p>
            <div ng-repeat="update in link">
                <a ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/{{key}}">{{value}}</a>
            </div>
        </div>

However, the problem I have is that this is not behaving in the way I would expect. When the code is returned, I am seeing this in my Firebug console suggesting it is parsing each letter of my value and making it into a link:

        <!-- ngRepeat: (key, value) in update track by $index -->
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/0">V</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/1">e</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/2">n</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/3">e</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/4">z</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/5">u</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/6">e</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/7">l</a>
<a class="ng-scope ng-binding" ng-repeat="(key, value) in update track by $index" href="/umbraco/#/content/content/edit/8">a</a>

How do I amend my code so that the links are displayed as I intend?

Any help would be greatly appreciated.

Upvotes: 0

Views: 328

Answers (1)

Rahul
Rahul

Reputation: 211

<div class="info-window">
    <p ng-repeat="item in info track by $index">{{item}}</p>
    <div ng-repeat="(key, value) in update">
        <a href="/umbraco/#/content/content/edit/{{key}}">{{value}}</a>
    </div>
</div>

Lets try this one. If not work then lets reply.

Upvotes: 1

Related Questions