在AngularJS中顯示對象屬性

Question

我正在嘗試在AngularJS中顯示信息為

<div ng-repeat="track in list.tracks" class="trackInfo">
            <span id="trackName" style="font-size: 32px;">{{ track.title }}</span>
</div>

list.tracks console.log如下：

(20) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

每個對象都包含類似的值

0:Object
genres: Array(1)
id: 84
title: "name"

沒有顯示輸出。 它什么也沒顯示。 小提琴

Answer 1

嘗試console.log(JSON.stringify(list.tracks));

Answer 2

我做了一個指令以角度記錄對象或數組

設置$rootScope.debug = true使其顯示！ （或在視圖中刪除ng-if="$root.debug" ）

用法：

<dir.log dlog="test" dtitle="test from controller"></dir.log>

在您的控制器中

$scope.test = { genres: ["male"],id: 84,title: "name" }

指令代碼

var directives = angular.module('directives', []);
directives.directive("dir.log", function () {
   return {
      restrict: 'E',
      replace: false,
      scope: {
         dlog: '=', // what object or array to log
         dtitle: '@' // the title displayed on hover of the show/hide button

      },
      controller: function ($scope, $rootScope) {
         $scope.logshow = false ;       
      },
      templateUrl: "partials/elements/log.html"
   }
});

html代碼

<div ng-if="$root.debug" class="text-left">     
        <button tooltip-placement="right" uib-tooltip="log debug {{dtitle}}" ng-hide="logshow" ng-click="logshow=true;" class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-collapse-down"></span></button>
        <button tooltip-placement="right" uib-tooltip="log debug {{dtitle}}" ng-hide="!logshow" ng-click="logshow=false;" class="btn btn-default btn-xs ng-hide" type="button">
            <span class="glyphicon glyphicon-collapse-up"></span>
        </button>
        <pre ng-if="logshow"><span ng-show="dtitle!=null">{{dtitle}}:<br></span>{{dlog |json}}</pre>

</div>

Answer 3

我使用$scope及其工作方式。

html

<div ng-app="ListTracksApp" ng-controller="MusicController">
      <h3>Music Tracks</h3>
          <div ng-repeat="track in tracks" class="trackInfo">
                <span class="trackName" style="font-size: 32px;">{{track.title}}</span>
                <div class="rating">{{ track.rating }}</div>

        </div>
    </div>

角度文件

(function () {
var myApp = angular.module('ListTracksApp', []);
myApp.controller('MusicController', MusicController);
myApp.service('MusicService', MusicService);
MusicController.$inject = ['MusicService','$scope'];

function MusicController(MusicService,$scope){
  var vm = $scope;
  vm.name="test";
  var promise = MusicService.getTracks();
  //console.log(promise);
  promise.then(function(response) {
    vm.tracks = response.data.results;
    console.log(vm.tracks);
    //console.dir(list.tracks);
  })
  .catch(function(error){
    console.log("Something went wrong!");
  });

}


MusicService.$inject = ['$http'];
function MusicService($http) {
  var service = this;
  service.getTracks = function(){
    var response = $http({
      method: "GET",
      url: "http://104.197.128.152:8000/v1/tracks"
    });
    return response;
  };
}
})();