外部ソースからデータを取得できない理由を知りたいです。Json のコンテンツを復元して解析し、このテンプレートにコンテンツを表示する必要があります。
ニュースの名前: {{new.length}}
<div>
<lignevin class="ligne-vin" ng-repeat="new in $ctrl.news">
<etiquevin class="etiquettevin">
<img class="etiquette" src="{{new.img}}"/>
</etiquevin>
<descriptifvin class="descriptif-vin">
<p class="title">{{new.name}}</p>
<p class="sub-title">{{new.ref}}</p>
<p>{{new.prixTotal}}</p>
<p>{{new.prixUnit}}</p>
</descriptifvin>
</lignevin>
</div>
このコードを使用すると、メッセージが表示されずに機能しません。
function NewsListCtrl($scope, $http) {
$http.get('http://myndd/myfile.json').success(function (data) {
$scope.news = data;
console.log($scope);
});
};
angular.
module('myApp').
component('newsList',{
templateUrl :'templates/newsdetail.html',
controller: NewsListCtrl,
bindings: {
news: '='
}
}
);
ただし、このように外部からデータを呼び出さない場合:動作します
angular.
module('myApp').
component('newsList',{
templateUrl :'templates/newsdetail.html',
controller: function NewsListCtrl(){
this.news=[
{
"id": 1,
"name": "name1",
"ref": "ref1",
"conditionnement" : "cond1",
"prixTotal": "10,00€",
"prixUnit" : "1,00€",
"img": "http://myndd/myfile1.png"
},
{
"id": 2,
"name": "name2",
"ref": ref2",
"conditionnement" : "cond2",
"prixTotal": "20,00",
"prixUnit" : "2,00€",
"img":"http://myndd/myfile2.png"
}
];
}
}
);