Как показать наборы данных JSON в нескольких делениях

0

У меня есть сценарий, где я должен показывать данные json в нескольких div. Я не знаю, как это сделать. До сих пор мне удалось получить json-данные и распечатать их на консоли.

Скажем, у меня есть шесть 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.

Html с шестью divs:

<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);
    });
});
Теги:

3 ответа

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>
Поделиться
  • 0
    Хорошо, я планирую изучить директивы. Я все еще новичок в угловой. Огромное спасибо. Но я не понял, "if you want to display a more elaborate "div" you should create a directive who display it and use it each time" ??
  • 0
    это то, что делает директива. директива имеет собственный контроллер, может иметь собственную область видимости или совместно использовать родительскую область видимости, а также свой собственный html. поэтому каждый раз, когда вы вызываете его в html ( <yourDirName></yourDirName> ), он отображает ее html. так что вы можете создать директиву для отображения информации о пользователе (ваш div1, div2 ...)
Показать ещё 5 комментариев
3

элемент, который вы используете ng-repeat on, будет повторяться столько раз, сколько элементов в вашем массиве/объекте. Таким образом, как вы получили, если вы хотите 6 divs, вы используете 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>
Поделиться
1

пытаться

<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>
Поделиться
  • 0
    Его печать только первое значение (ученый Nasa) во всех div
  • 0
    <li ng-bind = "x.jobName"> </ li>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню