从对象返回数据并通过AngularJS在<ul>中显示</ul>

时间:2014-11-26 16:12:45

标签: javascript .net json angularjs get

我有一个控制器从服务器接收下面的JSON:

"[{\"nome\": \"Ricardo Andrade\"}]"

我的控制器通过解析JSON删除\,我的控制器是:

app.controller("userLogado", function ($scope, $http) {

    //$http.get('web/core/components/home/nav.json').
    $http.get('http://localhost:2099/api/autenticacao/NomeUsuarioLogado').
     success(function (data) {

         debugger;
          var result = json_parse(data);

          var sNome = '';

          $.each(result, function(key, item) {

              sNome = item.nome;
          });


      })
});

我的问题是,如何使用AngularJS获取此控制器的结果并显示在我的HTML中?

我尝试使用警报并得到这样的正确名称:“Ricardo Andrade”。

提前致谢!

2 个答案:

答案 0 :(得分:1)

就像将结果附加到控制器一样简单。 获得所需结果后,只需将其附加到范围。

app.controller("myCtrl", function ($scope, $http) {
    $scope.result = "Ricardo Andrade"
});

和HTML

<div ng-controller="myCtrl">
{{result}}
</div>

如果您有多个名称,则需要重复这些名称。

<div ng-controller="myCtrl">
  <ul ng-repeat='name in result'>
    <li>{{name}}</li>
  </ul>
</div>

答案 1 :(得分:0)

<ul>
  <li ng-repeat="names in result">
    [{{$index + 1}}] {{names.nome}}
  </li>
</ul>

看看ngRepeat:

文档:https://docs.angularjs.org/api/ng/directive/ngRepeat

W3Schools:http://www.w3schools.com/angular/angular_directives.asp

编辑:

我听说使用ng-repeat和数组会更好,所以如果你愿意的话,你可能想要这样做:

你的控制器:

$scope.allNames =[];
app.controller("userLogado", function ($scope, $http) {

//$http.get('web/core/components/home/nav.json').
$http.get('http://localhost:2099/api/autenticacao/NomeUsuarioLogado').
 success(function (data) {

    debugger;
    var result = json_parse(data);

    for(var name in result) {                   
        $scope.allNames.push(angular.copy(result[name]));
    }          

  })
});

您的HTML:

<ul>
  <li ng-repeat="names in allNames">
    [{{$index + 1}}] {{names.nome}}
  </li>
</ul>

ul列表必须位于具有ng-controller属性的容器中。

E.g。

<div ng-controller="userLogado">
 <ul list here>
</div>

使用带有ng-repeat的数组的好处是您可以过滤(Read here)和订购(Read here)数据。