0
Я имел такой код:Загрузка данных из JSON с помощью углового
JBenchApp.controller('CaseListCtrl', ['$scope',
function ($scope) {
// Case list stuff here
$scope.cases = [
{
'number': '30-2013-0069378-PR-PL-CJC',
'title': 'Baumgartner - Probate',
'sequence': '',
'time': '9:00 am',
'event': 'Petition for Final Distribution',
'event2': ''
},
{
'number': '30-2013-00649408-PR-PL-CJC',
'title': 'Dupaquier - Probate',
'sequence': '',
'time': '9:00 am',
'event': 'Petition - Other',
'event2': ''
},
{
'number': '30-2011-00510275-PR-PL-CJC',
'title': 'Baker - Conservatorship',
'sequence': '',
'time': '9:00 am',
'event': 'Accounting',
'event2': 'Review Hearing'
},
{
'number': '30-2010-00334622-PR-PL-CJC',
'title': 'Montero - Minors Compromise',
'sequence': '',
'time': '9:00 am',
'event': 'Review Hearing',
'event2': ''
},
{
'number': '30-2011-005260282-PR-PL-CJC',
'title': 'Reed - Conservatorship',
'time': '9:00 am',
'event': 'Petition - Other',
'event2': ''
}
];
$scope.departments = [
{
'dept': '1'
},
{
'dept': '1A'
},
{
'dept': '2'
},
{
'dept': '2A',
},
{
'dept': '2B'
},
{
'dept': '2C'
},
{
'dept': '2D'
},
{
'dept': '3'
},
{
'dept': '4'
},
{
'dept': '5'
},
{
'dept': '6'
},
{
'dept': '7'
},
{
'dept': '8'
},
{
'dept': '9'
},
{
'dept': '11'
},
{
'dept': '12'
},
{
'dept': '13'
},
{
'dept': '14'
},
{
'dept': '15'
},
{
'dept': '16'
},
{
'dept': '17'
},
{
'dept': '18'
},
{
'dept': '19'
},
{
'dept': '20'
},
{
'dept': '21'
},
{
'dept': '22'
},
{
'dept': '23'
}
];
}]);
, и я хотел, чтобы переместить данные на внешний файл. Теперь у меня есть файл cases.js (.json не будет работать на моей локальной машине), которая имеет данные, как это:
[
{
'number': '30-2013-0069378-PR-PL-CJC',
'title': 'Baumgartner - Probate',
'sequence': '',
'time': '9:00 am',
'event': 'Petition for Final Distribution',
'event2': ''
},
{
'number': '30-2013-00649408-PR-PL-CJC',
'title': 'Dupaquier - Probate',
'sequence': '',
'time': '9:00 am',
'event': 'Petition - Other',
'event2': ''
},
{
'number': '30-2011-00510275-PR-PL-CJC',
'title': 'Baker - Conservatorship',
'sequence': '',
'time': '9:00 am',
'event': 'Accounting',
'event2': 'Review Hearing'
},
{
'number': '30-2010-00334622-PR-PL-CJC',
'title': 'Montero - Minors Compromise',
'sequence': '',
'time': '9:00 am',
'event': 'Review Hearing',
'event2': ''
},
{
'number': '30-2011-005260282-PR-PL-CJC',
'title': 'Reed - Conservatorship',
'time': '9:00 am',
'event': 'Petition - Other',
'event2': ''
}
];
Я изменил код следующим образом:
JBenchApp.controller('CaseListCtrl', ['$scope', '$http',
function ($scope, $http) {
// Case list stuff here
$http.get('json/cases.js').success(function (response) {
$scope.cases = response;
});
$scope.departments = [
{
'dept': '1'
},
{
'dept': '1A'
},
{
'dept': '2'
},
{
'dept': '2A',
},
{
'dept': '2B'
},
{
'dept': '2C'
},
{
'dept': '2D'
},
{
'dept': '3'
},
{
'dept': '4'
},
{
'dept': '5'
},
{
'dept': '6'
},
{
'dept': '7'
},
{
'dept': '8'
},
{
'dept': '9'
},
{
'dept': '11'
},
{
'dept': '12'
},
{
'dept': '13'
},
{
'dept': '14'
},
{
'dept': '15'
},
{
'dept': '16'
},
{
'dept': '17'
},
{
'dept': '18'
},
{
'dept': '19'
},
{
'dept': '20'
},
{
'dept': '21'
},
{
'dept': '22'
},
{
'dept': '23'
}
];
}]);
Мои частично выглядит следующим образом:
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<a href="#" class="btn btn-primary flat-edge">>></a>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" selectpicker ng-controller="CaseListCtrl">
<option ng-repeat="department in departments">{{department.dept}}</option>
</select>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div ng-controller="CaseListCtrl">
<div class="col-sm-8 col-sm-offset-2 caselist" ng-repeat-start="case in cases track by $index">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.sequence}}" />
</div>
<div class="casetitle">
<a href="/case/{{case.number}}" class="caselink">{{case.number}}</a>
<a href="/case/{{case.number}}" class="btn btn-xs btn-danger calicon-view">
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="/case/{{case.number}}" class="btn btn-xs btn-danger calicon-view">
<span class="glyphicon glyphicon-user"></span>
</a>
{{case.title}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1">
<div class="hearing-time">{{case.time}}</div>
<div class="hearing-title">{{case.event}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
Когда я запускаю это, я получаю кучу строк без каких-либо данных. Если я вывешу «дорожку по индексу», я получаю сообщение об ошибке с дублирующимся ключом. Как я могу сделать эту работу, чтобы она отображала мои данные?
Мне пришлось добавить MIME-тип для .JSON, но я все равно получаю одинаковые результаты. Я просто получаю кучу строк без каких-либо данных. Если я вывожу дорожку по индексу $ index, я получаю сообщение об ошибке с дублирующимся ключом. Это работает, когда строка кода просто $ scope.cases = (и данные JSON прямо здесь), поэтому я не уверен, что проблема на самом деле. Помогите? –
действительно ли $ scope.cases заполняется правильно, когда get сделан? –
Не то, чтобы я мог видеть ... что происходит, когда ng-repeat проходит через движения и перечисляет кучу строк того, что должно быть данными, но пуст –