設定值從angularjs控制器不工作

Question

我想通過一個AngularJs控制器來顯示HTML的用戶配置文件值的HTML標記，但它不是在我將它們綁定在html <p>顯示。 jsfiddle

AngularJs應用程序：

var app = angular.module('myApp', []); 

app.service('UserService', function() { 
    var userDetails = [{ 
      id : 27, 
      first_name : 'Addy', 
      last_name : 'Villiams', 
      gender : 1, 
      email : 'addy@villiams.com', 
      creation_date : '2015-09-23 10:53:19.423', 
      age : 25, 
      profile_pic : 'avatar.get?uid=27' 
    }]; 

    this.get = function() { 
     return userDetails; 
    } 
}); 


app.controller('UserController', function ($scope, UserService) { 

    $scope.userinfo = UserService.get(); 

}); 

HTML：

<div ng-controller="UserController"> 
    <p>{{userinfo.id}}</p> 
    <p>{{userinfo.first_name}}</p> 
</div> 

Answer 1

從服務返回的對象是一個陣列與一個對象。

$scope.userinfo = UserService.get()[0]; // Get the first element from array 

Demo

或更改服務返回數組的對象，而不是。

var userDetails = { 
    id: 27, 
    first_name: 'Addy', 
    last_name: 'Villiams', 
    gender: 1, 
    email: 'addy@villiams.com', 
    creation_date: '2015-09-23 10:53:19.423', 
    age: 25, 
    profile_pic: 'avatar.get?uid=27' 
}; 

Demo

Answer 2

所以您服務UserService.get（）返回一個對象的數組，以便userinfo.id和userinfo.first_name是不確定的。你可以解決它，只返回對象或使用視圖 userinfo[0].id和 userinfo[0].first_name。請檢查小提琴在陣列http://jsfiddle.net/rawat/k3phygpz/533/

Answer 3

你初始化的用戶對象。您可以從用戶初始化去掉方括號[]：

var userDetails = { 
    id: 27, 
    first_name: 'Addy', 
    last_name: 'Villiams', 
    gender: 1, 
    email: 'addy@villiams.com', 
    creation_date: '2015-09-23 10:53:19.423', 
    age: 25, 
    profile_pic: 'avatar.get?uid=27' 
}; 

或使用

$scope.userinfo = UserService.get()[0]; 

Answer 4

刪除[]括號 - 你應該返回一個對象不是一個數組：

var userDetails = { 
    id: 27, 
    first_name: 'Addy', 
    last_name: 'Villiams', 
    gender: 1, 
    email: 'addy@villiams.com', 
    creation_date: '2015-09-23 10:53:19.423', 
    age: 25, 
    profile_pic: 'avatar.get?uid=27' 
};