Question

我有一个场景，我必须在多个div中显示json数据。我不知道该怎么做。到目前为止，我能够获取json数据并将其打印到控制台中。

假设我有六个div，每个div都有以下字段：

        DIV 1
  ----------------
 | JName:    value1 |
 | JobSkill: value2 |
 | Descrip : value3 |
 | Salary:   value4 |
 | Experien: value5 |
  ----------------

        DIV 2
  ----------------
 | JName:    value1 |
 | JobSkill: value2 |
 | Descrip : value3 |
 | Salary:   value4 |
 | Experien: value5 |
  ----------------

我想将每个json数据集值映射到每个div1，div2..etc

我有这样的json：

{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}

所以json的第一行或一组应映射到div1，然后第二行映射到div2等。我该怎么做？

如果我重复，那么它会打印一个div中的所有内容。

带六个div的Html：

<div class="col-lg-8 col-md-6 col-sm-12">
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;" ng-controller="jobSummaryController">
        <ul>
            <li ng-repeat="x in token">
                {{ x.jobName }}
            </li>
        </ul>
    </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
</div>

角度控制器：

myApp.controller('jobSummaryController', function ($scope, $http) {

    var url = 'rs/FetchJobSummary';
    $http.get(url).success(function (response)
    {
        $scope.token = response;

        console.log("job is:" + JSON.stringify(response));
    }).error(function (response)
    {
        console.log("error", response);
    });
});

Answer 1

您使用ng-repeat on的元素将重复与数组/对象中的项目一样多次。因此，如果你想要6个div，你就可以使用ng-repeat来重复你想要重复的div元素：

<div ng-repeat="x in token" class="job_box col-lg-offset-0" style="float: left; margin: 2px;">
  <ul>
    <li ng-bind="x.jobName">
    </li>
    <li ng-bind="x.jobPrimarySkill">
    </li>
    <!--...-->
  <ul>
</div>

Answer 2

你必须将ng-repeat放在div元素

上

http://plnkr.co/edit/TntCqHhbKDqaebDSlbOE?p=preview

  <div ng-repeat="x in token" style="border:2px solid black;">
      {{ x.jobName }}<br>
      {{ x.jobPrimarySkill }}<br>
      {{ x.jobRole }}<br>
      {{ x.jobDesignation }}<br>
      {{x.jobDescription}}<br>
  </div>

如果你想使用指令 http://plnkr.co/edit/FWattoHd9yFmVbnCpUDC?p=preview

app.directive('mydir',function(){
  return {
    restrict: 'E',
    scope : {  
      data : '='
    },
    templateUrl: 'mydir.html'
  };
});

和html调用

  <div ng-repeat="data in token">

    <mydir data='data'></mydir>

  </div>

和指令html：

<div style="border:2px solid black;margin:10px;">
  {{data.jobName         }}<br>
  {{data.jobPrimarySkill }}<br>
  {{data.jobRole         }}<br>
  {{data.jobDesignation  }}<br>
  {{data.jobDescription  }}<br>
  {{data.jobSalaryRange  }}<br>
  {{data.jobExp          }}<br>
  {{data.jobPositions    }}<br>
  {{data.jobPostedBy     }}<br>
</div>

Answer 3

试

<div ng-controller="jobSummaryController">
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;"  
            ng-repeat="i in [1,2,3,4,5]">
        <ul>
            <li ng-bind="x.jobName"></li>
            <li ng-bind="x.jobxxx"></li>
            ...
        </ul>
    </div>
</div>

如何在多个div中显示json数据集

3 个答案: