Question

我在使用angularjs

进行数据绑定时遇到问题

我正在尝试绑定控制器视图中的数据。数据已在响应中成功收到。我已经在datalist中分配了它。在尝试使用ng-repeat和ng-bind循环数据列表时，我无法查看。似乎ng-repeat工作，我能够看到索引循环成功。请帮助解决这个问题。

HTML

        <tbody>
        <tr ng-repeat="data in dataList">
            <td>{{$index+1}}</td>
            <td ng-bind="data.Name"></td>
            <td ng-bind="data.Email"></td>
            <td ng-bind="data.Phone"></td>
        </tr>
    </tbody>

Angular Js

      var myApp = angular.module('myModule', []);
      myApp.controller('myController', function ($scope, $http) {
      $scope.dataList = [];
      $http.get('/Home/JsonValue').then(function (response) {
      if (response != null || response != "undefined") {
        $scope.dataList = response;
    }
})
  });

Json Data

   Data: Array(5)
      0:{Name: "Pramod", Email: "Pramod@gmail.com", Phone: "987654321"}
      1:{Name: "Prem", Email: "Prem@gmail.com", Phone: "123456789"}
      2:{Name: "Ram", Email: "Ram@gmail.com", Phone: "9811234343"}
      3:{Name: "Shyam", Email: "Shyam@gmail.com", Phone: "9889657454"}
      4:{Name: "Jitesh", Email: "Jitesh@gmail.com", Phone: "9535468899"}

Answer 1

您应该访问响应的数据属性

 $http.get('/Home/JsonValue').then(function (response) {
      if (response != null || response != "undefined") {
        $scope.dataList = response.data;
 }

Answer 2

我正在写这个答案只是为了纠正你的json格式。虽然Sajeetharan的答案是正确的，但如果您的json格式不正确，@ Thiyagarajan即使您使用response.data，您的代码也不会显示json数据。因此，我为您的问题创建了example。

var myApp = angular.module('myModule', []);
myApp.controller('myController', function ($scope) {
    $scope.dataList = [
                {Name: "Pramod", Email: "Pramod@gmail.com", Phone: "987654321"},
                {Name: "Prem", Email: "Prem@gmail.com", Phone: "123456789"},
                {Name: "Ram", Email: "Ram@gmail.com", Phone: "9811234343"},
                {Name: "Shyam", Email: "Shyam@gmail.com", Phone: "9889657454"},
                {Name: "Jitesh", Email: "Jitesh@gmail.com", Phone: "9535468899"}
      ];
});

感谢!!!

Answer 3

尝试更新您的JSON结构，如下所示

[
  {"Name":"Pramod", "Email": "Pramod@gmail.com"}
]

（将其保存在json文件中并使用$ http.get（）方法调用该文件）

Ng-bind无效

3 个答案: