输出键值对作为AngularJS中的链接

时间:2015-02-06 14:00:52

标签: javascript html angularjs

我在使用AngularJS作为链接输出对象中的KeyValue对时遇到了一些问题。

使用以下代码在C#中构造对象:

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

当使用我的HTML和Angular代码中的按钮发出请求时,此对象作为一般对象的一部分返回到我的Javascript代码,其定义如下:

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

然后使用以下函数处理此对象:

$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;
            });
        };

以下是此代码中console.log的输出:

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

然后我按如下方式使用ng-repeat来遍历对象中的keyValue对,并使用链接href中的键和链接文本中的名称输出链接。

<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>

然而,我遇到的问题是这不符合我的预期。返回代码时,我在Firebug控制台中看到这一点,建议它解析我的每个字母值并将其转换为链接:

        <!-- 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>

如何修改我的代码,以便按我的意图显示链接?

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

<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.