Question

我试图在角度js中迭代对象数组但是我收到错误，因为即使我已经定义了它也无法设置undefined属性。

Please find my code below : 


var app = angular.module('myDemoApp', []);

    app.service('MyTaskService', function($http) {
        var services = {
            userList: userList,
        };
        function userList(req) {
            if (req == undefined)
                req = {};
            return $http({
                url: "https://jsonplaceholder.typicode.com/posts",
                method: "GET",
                data: req
            });
        }
        return services;
});


app.controller('MyTaskController', function($scope, MyTaskService) {
    $scope.resp  = {};
    $scope.getPrjDetails = function() {
    try {
                var promise = MyTaskService.userList();
                promise.then(function (sucResp) {
                    try {
                       $scope.resp  = sucResp.data;
                    } catch (exception) {
                        console.log(exception);
                        return;
                    }
                }
                , function (errResp) {
                   console.log(errResp);
                    return;
                });
            } catch (exception) {
                console.log(exception);
                return;
            }
    }
});

找到我的模板：

<ul>
   <li ng-repeat="myData in resp">{{myData.id}}</li>
</ul>

如何迭代所有json值并显示在模板或列表中的文本框中？

<div ng-app="myDemoApp">
    <div ng-controller="MyTaskController">
    <table tyle="float:right;">
        <tr><h3>New Project Form</h3></tr>
        <tr>
            <td class='padding-to-controls'>Get Project Details</td>
            <td class='padding-to-controls'>
                <select ng-change="getPrjDetails()" ng-model="select_project" > 
                    <option value=''>Select Project Details</option>
                    <option value='get-details'>Get Project Details</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class='padding-to-controls'>New Project Name <span>*</span></td>
            <td class='padding-to-controls'> <input type = 'text' ng-model="project_name" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Assign location to project <span>*</span></td>
            <td class='padding-to-controls'> <input type = 'text' ng-model="assign_location" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Area </td>
            <td class='padding-to-controls'><input type = 'text' ng-model="area"  ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>City</td>
            <td class='padding-to-controls'><input type = 'text' ng-model="city" ></td>
        </tr> 
         <tr>
            <td class='padding-to-controls'>State </td>
            <td class='padding-to-controls'><input type = 'text' ng-model="state" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Cluster</td>
            <td class='padding-to-controls'><input type = 'text' ng-model="cluster" ></td>
        </tr> 
         <tr>
            <td class='padding-to-controls'>Region</td>
            <td class='padding-to-controls'><input type = 'text' ng-model="region" ></td>
        </tr> 
         <tr>
            <td class='padding-to-controls'>Type <span>*</span> </td>
            <td class='padding-to-controls'><input type = 'text' ng-model="type" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Priority <span>*</span></td>
            <td class='padding-to-controls'><input type = 'text' ng-model="priority" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Name of approver<span>*</span></td>
            <td class='padding-to-controls'><input type = 'text' ng-model="name_approver" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'></td>
            <td class='padding-to-controls'><button ng-click="getPrjDetails()">EDIT</button></td>
        </tr>
        </table>
    </div>
</div>

请找到我的json链接，我正在尝试访问:: https://jsonplaceholder.typicode.com/posts

Answer 1

首次渲染dom时，角度开始搜索resp.data，在你的情况下是未定义的，因此有角度会抱怨。

您不需要将$ scope变量传递给任何控制器函数。他们可以直接访问它。

在整个代码中，您永远不会设置$scope.resp。

您的HTML背景与您尝试的方式有所不同。所以我稍微修改了一下。请尝试以下代码：

HTML：

<div ng-app="myDemoApp">
  <div ng-controller="MyTaskController">
    <h3>Feeds</h3>
    <button ng-click="getPrjDetails()">Load</button>

    <div ng-repeat="myData in resp.data">
      <span> {{myData.id}}</span>
      <input ng-model="myData.title" type="text" />
    </div>

  </div>

角

app.controller('MyTaskController', function($scope, MyTaskService) {

  // Required
  $scope.resp = {
    data: []
  }

  $scope.getPrjDetails = function() {
    try {
      var promise = MyTaskService.userList();
      promise.then(function(sucResp) {
        try {
          var resp = sucResp.data || [];

          // You must update $scope.resp.data 
          $scope.resp.data = resp;

          console.log($scope.resp.data);
        } catch (exception) {
          console.log(exception);
          return;
        }
      }, function(errResp) {
        console.log(errResp);
        return;
      });
    } catch (exception) {
      console.log(exception);
      return;
    }
  }

})

小提琴working

如何使用角度js中的ng-repeat迭代json对象数组？

1 个答案: