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"
    }]
}]
}

答

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!

答

here is working example

i guess your problem was

<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
    {{playlist.name}}
  </ion-item>

you use ng-repeat on playlists which is not an array. you should repeat playlists.category or make playlists to return an array

答

in your controller push the name only into a seperate object and then try to use ng-repeat as i used below

controller

.controller('PlaylistsCtrl', function($scope,$http) {

$scope.playlists = [];

$http.get("http://localhost/youtubewebservice/shop-categorylist-product.php") .success(function(response) {

     $scope.playlist = response.category;

       $scope.playlist.forEach(function(item){
                $scope.playlist.push(item.name);
                console.log(item.name);
            })
});   
})

inside your view

<ion-view view-title="playlists">
<ion-content>
<ion-list ng-repeat="play in playlists">
  <ion-item >
    {{play}}
  </ion-item>
</ion-list>
 </ion-content>
</ion-view>

答

Check this , it working http://play.ionic.io/app/cad0085554e6

HTML

 <body ng-app="app" ng-controller="PlaylistsCtrl as plist">

    <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 plist.playlists" href="#/app/playlists/{{playlist.id}}">
    {{playlist.name}}
  </ion-item>
      </ion-content>
    </ion-pane>
  </body>

javascript

angular.module('app', ['ionic'])

.controller('PlaylistsCtrl', function($scope,$http) {

var vm = this;

vm.playlists = {};

var response = {
"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"
    }]
}]
};
     vm.playlists = response.category; 


});

angularjs控制器有什么问题

相关推荐