訪問Angular.js

我的基本代碼到目前爲止另一個控制器：訪問Angular.js

function UsersCtrl($scope) { 
    $scope.users = [ 
     { 
      "id": 1, 
      "usersName": "Matt Dance", 
      "favorites": { 
       "id":1, 
       "lodge_id":1 
      } 
     }, 
     { 
      "id":2, 
      "usersName": "Jennifer Dance", 
      "favorites": { 
       "id":1, 
       "lodge_id":2 
      } 
     } 
    ]; 
}; 

function LodgesCtrl($scope) { 
    $scope.lodges = [ 
     { 
      id: 1, 
      lodgesName: 'Matt\'s Awesome Lodge', 
      lodgeOwnersName: 'Matthew D', 
      lodgeStreetAddress: '5555 J lane', 
      lodgeCity: 'Salt Lake city', 
      lodgeZip: '11111', 
      lodgeState: 'Utah' 
     }, 
     { 
      id: 2, 
      lodgesName: 'Some Historic Lodge', 
      lodgeOwnersName: 'Santa Claus', 
      lodgeStreetAddress: '1 Clearwater Road', 
      lodgeCity: 'Grand Marais', 
      lodgeZip: '55555', 
      lodgeState: 'Minnesota' 
     }, 
     { 
      id: 3, 
      lodgesName: 'Yellowstone Lodge', 
      lodgeOwnersName: 'The Feds', 
      lodgeStreetAddress: '1 Yellowstone Way', 
      lodgeCity: 'Yellowstone', 
      lodgeZip: '55555', 
      lodgeState: 'Wyoming' 
     }, 
     { 
      id: 4, 
      lodgesName: 'Cool Lodge', 
      lodgeOwnersName: 'Awesome Guy', 
      lodgeStreetAddress: '1 awesome Road', 
      lodgeCity: 'Eagle Mountain', 
      lodgeZip: '55555', 
      lodgeState: 'Utah' 
     }, 
     { 
      id: 5, 
      lodgesName: 'The last lodge', 
      lodgeOwnersName: 'Adam V', 
      lodgeStreetAddress: '444 Last Road', 
      lodgeCity: 'San Francisco', 
      lodgeZip: '55555', 
      lodgeState: 'California' 
     } 
    ]; 
};

我希望用戶能夠看到他們收藏的小屋的小屋名字。例如，用戶最喜歡一個ID爲1的小屋。那麼我怎麼能循環遍歷每個用戶，並顯示所喜歡的小屋的標題？基本上，我需要爲其收藏夾中的每個用戶使用lodge_id來顯示小屋名稱。

我的HTML是迄今：

<div ng-controller="UsersCtrl"> 
<ul class="unstyled"> 
    <li ng-repeat="user in users"> 
    {{user.usersName}}<br> 
    </li> 
</ul> 
</div>

我新的角度（和一般的JS框架），和我不知道如何去了解這一點。我研究過像Ember這樣的其他框架，但沒有能夠以「簡單」的方式解決它。

來源

2013-10-01 mdance

最簡單的解決方案是構建映射對象並將其綁定到$ rootScope。例如：

$rootScope.mapping = { 
    userId: [lodge1, lodge2...] 
}

來源

2013-10-01 23:09:58 geniuscarrier

這是一個用戶ID映射基本上與幾個小屋的id ...正確嗎？ – mdance

@mdance正是:) – geniuscarrier

我做您的代碼一些變化，現在是工作，但我認爲你需要組織你的數據在一個更好的方式，所以你可以在一個更簡單的方法做你的迭代。

你也可以在這裏看到一個工作的重擊者（http://plnkr.co/edit/DtBxzYulJGTQC0KJsh8M?p=preview）。

<!doctype html> 
<html lang="en" ng-app="myApp"> 
    <head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 

<script> 

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

myApp.controller('UsersCtrl', ['$scope', function ($scope) { 
    $scope.users = [ 
     { 
      "id": 1, 
      "usersName": "Matt Dance", 
      "favorites": { 
       "id":1, 
       "lodge_id":1 
      } 
     }, 
     { 
      "id":2, 
      "usersName": "Jennifer Dance", 
      "favorites": { 
       "id":1, 
       "lodge_id":2 
      } 
     } 
    ]; 

    $scope.lodges = [ 
     { 
      id: 1, 
      lodgesName: 'Matt\'s Awesome Lodge', 
      lodgeOwnersName: 'Matthew D', 
      lodgeStreetAddress: '5555 J lane', 
      lodgeCity: 'Salt Lake city', 
      lodgeZip: '11111', 
      lodgeState: 'Utah' 
     }, 
     { 
      id: 2, 
      lodgesName: 'Some Historic Lodge', 
      lodgeOwnersName: 'Santa Claus', 
      lodgeStreetAddress: '1 Clearwater Road', 
      lodgeCity: 'Grand Marais', 
      lodgeZip: '55555', 
      lodgeState: 'Minnesota' 
     }, 
     { 
      id: 3, 
      lodgesName: 'Yellowstone Lodge', 
      lodgeOwnersName: 'The Feds', 
      lodgeStreetAddress: '1 Yellowstone Way', 
      lodgeCity: 'Yellowstone', 
      lodgeZip: '55555', 
      lodgeState: 'Wyoming' 
     }, 
     { 
      id: 4, 
      lodgesName: 'Cool Lodge', 
      lodgeOwnersName: 'Awesome Guy', 
      lodgeStreetAddress: '1 awesome Road', 
      lodgeCity: 'Eagle Mountain', 
      lodgeZip: '55555', 
      lodgeState: 'Utah' 
     }, 
     { 
      id: 5, 
      lodgesName: 'The last lodge', 
      lodgeOwnersName: 'Adam V', 
      lodgeStreetAddress: '444 Last Road', 
      lodgeCity: 'San Francisco', 
      lodgeZip: '55555', 
      lodgeState: 'California' 
     } 
    ]; 
    }]); 


    </script> 

    </head> 
    <body> 

<div ng-controller="UsersCtrl"> 
<ul> 
    <li ng-repeat="user in users"> 
    {{user.usersName}}<br> 
    {{user.favorites.lodge_id}}<br> 
     <p ng-repeat="lodge in lodges | filter: { id: user.favorites.lodge_id }"> 
      {{lodge.lodgesName}} 
     </p> 
    </li> 
</ul> 
</div> 

</body> 
</html>

來源

2013-10-01 23:21:27

我相信mdance在問兩個控制器如何相互通話。您的解決方案只有一個控制器。 – geniuscarrier

您應該使用服務。由於服務是單身，它們是在控制器之間共享內容的最簡單方式。事實上，它的角方式：

不要使用控制器爲：

跨控制器共享無狀態或有狀態碼 - 使用角度服務來代替。

Developer Guide/Understanding the Controller Component

來源

2013-10-01 23:29:01

請注意，您引用的文字是關於共享「代碼」，而不是共享數據。實際上，AngularJS FAQ指出：「相反，不要創建一個服務，其唯一目的就是存儲和返回數據」。 FAQ實際上告訴我們$ rootScope可能也可能應該用於這個。但我不確定我是否完全同意他們的建議，而其他人也對此表示懷疑。 –

那麼，什麼被認爲是最佳實踐？最終我分享數據，而不是代碼。到目前爲止還不清楚這是最好的方法。 – mdance

回答

相關問題