angularjs控制器有什么问题答案

【问题标题】：What is wrong in angularjs controllerangularjs控制器有什么问题
【发布时间】：2016-07-14 06:21:14
【问题描述】：

我必须将列表添加为无法正常工作的类别。我在这个问题下面添加了 PlaylistsCtrl.js、playlists.html 文件和我的 php json 文件。

播放列表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"
    }]
}]
}

【问题讨论】：

你能把你得到的错误贴出来吗？
改变vm.playlists = {};在$http请求中的位置。
控制台没有错误
ion-item ng-repeat="playlist in plist.playlists" href="#/app/playlists/{{playlist.id}}" >
尝试使用var vm = $scope; 而不是var vm = this;

标签： javascript php angularjs angularjs-directive

【解决方案1】：

既然您使用的是controller-as-syntax，那么您当然必须在视图中使用as 语法，如下所示：

将您的控制器的代码更改为：

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>

填写DEMO

希望对你有帮助！

【讨论】：

然后发布您的完整视图。
你能给我这个问题的答案吗？如果你能做得更好我的朋友...stackoverflow.com/questions/37107684/…
这是可行的，但我需要处理我朋友的 playlist.html 文件。我的朋友不需要在 index.html 页面上写任何代码
现在，我需要获取另一个页面的其他详细信息。你能帮帮我吗？

【解决方案2】：

检查一下，它可以工作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; 


});

【讨论】：

我需要使用我朋友的 URL 获取 json 数据。不是硬编码json数据我的朋友。
我们没有从你的 localhost 获取 json 数据，所以它是硬编码的，提供有效的 url 来获取 json。

【解决方案3】：

这里正在工作example

我猜你的问题是

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

您在playlists 上使用 ng-repeat，这不是一个数组。您应该重复 playlists.category 或使 playlists 返回一个数组

【讨论】：

对我来说工作正常。你想怎么看结果？你想要category 或products 的离子项目？
再次检查 Codepen。我已经对其进行了编辑，因此它将 Category -> products 显示为嵌套的 ion-item
我附上了结果的截图。这是你想要展示的吗？

【解决方案4】：

在您的控制器中，仅将名称推送到一个单独的对象中，然后尝试使用我在下面使用的 ng-repeat

控制器

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

在你的视野中

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

【讨论】：

您在应该在列表中的项目中使用了 ng-repeat
列表将显示在控制台中。但是，我的朋友没有处理视图。
哈哈，你在播放列表数组上看到的伙计，我已将您的响应名称推送到该数组，以便该数组仅包含名称，然后我在列表中的 ng-repeat 中使用了该数组
我需要做什么来查看我的朋友。我试过 {{play.name}} 但不工作
看我的回答我没有使用 play.name 我使用 play 只是因为在 $scope.playlists 数组中我们有名称