dongmouhao7438 2016-07-14 06:21
浏览 51
已采纳

angularjs控制器有什么问题

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.

PlaylistsCtrl.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"
    }]
}]
}
  • 写回答

4条回答 默认 最新

  • duanqiang6501 2016-07-14 06:31
    关注

    Since you're using controller-as-syntax, you, of course, must use the as syntax in your view, as below:

    Change the code your controller to:

    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;
    });
  });

    And in your view:

    <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>

    Complete DEMO

    I hope it helps!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 Jenkins+k8s部署slave节点offline
  • ¥15 微信小游戏反编译后，出现找不到分包的情况
  • ¥15 如何实现从tello无人机上获取实时传输的视频流，然后将获取的视频通过yolov5进行检测
  • ¥15 WPF使用Canvas绘制矢量图问题
  • ¥15 用三极管设计一个单管共射放大电路
  • ¥15 孟德尔随机化r语言运行问题
  • ¥15 pyinstaller编译的时候出现No module named 'imp'
  • ¥15 nirs_kit中打码怎么看(打码文件是csv格式)
  • ¥15 怎么把多于硬盘空间放到根目录下
  • ¥15 Matlab问题解答有两个问题