angularjs控制器有什么问题 [英] What is wrong in angularjs controller
本文介绍了angularjs控制器有什么问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须将列表添加为无法正常工作的类别.我在此问题下方添加了PlaylistsCtrl.js，playlists.html文件和php json文件.
I have to add list as a category this is not working properly. I added PlaylistsCtrl.js, playlists.html file and my php json file below this question.
播放列表Ctrl.js
.controller('PlaylistsCtrl', function($scope,$http) {
var vm = this;
vm.playlists = {};
$http.get("http://localhost/youtubewebservice/shop-categorylist-product.php") .success(function(response) {
vm.playlists = response.records;
});
})
playlists.html
<ion-view view-title="playlists">
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
shop-categorylist-product.php
{
"category": [{
"term_id": "10",
"name": "Arden Grange",
"slug": "arden-grange",
"products": [{
"ID": "47",
"post_title": "Arden Grange, Premium",
"post_date": "2015-10-20 16:13:04",
"post_author": "5"
}, {
"ID": "50",
"post_title": "Arden Grange Puppy\/Junior Large Breed",
"post_date": "2015-10-21 04:56:23",
"post_author": "5"
}, {
"ID": "53",
"post_title": "Arden Grange Weaning\/Puppy",
"post_date": "2015-10-22 12:52:35",
"post_author": "5"
}]
}, {
"term_id": "12",
"name": "Jewellery",
"slug": "jewellery",
"products": [{
"ID": "59",
"post_title": "Sterling silver Amethyst studs",
"post_date": "2015-11-30 09:37:05",
"post_author": "8"
}, {
"ID": "105",
"post_title": "London Blue topaz 7 carat AAA quality",
"post_date": "2015-12-01 05:09:32",
"post_author": "8"
}, {
"ID": "134",
"post_title": "7 Carat Natural Purple Amethyst AAA quality",
"post_date": "2015-12-01 05:09:31",
"post_author": "8"
}, {
"ID": "136",
"post_title": "10 carat natural Smoky Quartz AAA quality",
"post_date": "2015-12-01 05:09:31",
"post_author": "8"
}]
}]
}
推荐答案
由于您正在使用controller-as-syntax，因此，您当然必须在视图中使用 as 语法，如下所示:
Since you're using controller-as-syntax, you, of course, must use the as syntax in your view, as below:
将您的控制器的代码更改为:
angular.module('app', [])
.controller('PlaylistsCtrl', function($scope, $http) {
var vm = this;
vm.playlists = {};
$http.get("http://localhost/youtubewebservice/shop-categorylist-product.php").then(function(response) {
vm.playlists = response.data.category;
});
});
在您的视图中:
<html ng-app="app">
<head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> -->
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="PlaylistsCtrl as playCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<ion-item ng-repeat="playlist in playCtrl.playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.name}}
</ion-item>
</ion-content>
</ion-pane>
</body>
</html>
完成 演示
希望对您有帮助！
这篇关于angularjs控制器有什么问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
