選擇基於UI路由器的JSON對象url

編輯：更好的問題措辭。我基本上是看如何使用存儲在$ scope.item中的變量（從URL中使用$ stateParams獲取）來訪問產品JSON數組中的相關對象。選擇基於UI路由器的JSON對象url

好吧，我已經使用了ui-router和ng-ref的組合，以便當您點擊「＃/ shop /」頁面上的產品時，它會創建一個URL「＃/ shop/productname」，當瀏覽到在頁面上打開一個空白div，用於包含URL中提到的產品的詳細信息。

我遇到的問題，我敢肯定有一些簡單的我忽略的是，如何根據URL中的名稱獲取相應的數據？這樣我可以顯示存儲在JSON對象中的產品名稱/價格等？

任何幫助將幫助噸！如果你覺得我可以選擇一條更好的路徑，那麼我很有可能會把這一切都弄錯了，所以請把它引向正確的方向。

HTML：

shop.html URL：＃/店

... 
    <a ng-repeat="item in businesses | filter:{cat: cat} | filter:query" 
     ng-class="{active: item.selected}" 
     ng-href="#/shop/{{item.link}}" 
     ng-click="selectedItem(item)"> 
     ... 
    </a> 
    <div ui-view></div> 
...

product.html URL：＃/店/產品名稱

<h1>item.name</h1> 
<h2>item.price</h2>

App.js

angular.module('app', [ 
    'ngAnimate', 
    'ui.router' 
]) 

.config(function ($stateProvider, $urlRouterProvider){ 
    $urlRouterProvider.otherwise('/shop'); 
    $stateProvider 
     .state('shop',{ 
      url: '/shop', 
      templateUrl: 'templates/shop.html', 
      controller: 'starWarsCtrl' 
     }) 
     .state('shop.item',{ 
      url: '/:item', 
      templateUrl: 'templates/three-quarter-page.html', 
      controller: function($scope, $stateParams){ 
       $scope.item = $stateParams.item; 
      } 
     }) 
    ; 
}) 

.controller('appCtrl', function ($scope) { 
    $scope.products = [ 
    { 
     "name": "Product 1", 
     "index":1, 
     "link":"product1", 
     "price":"TBD", 
    } 
    ]; 

    $scope.selectItem = function (selectedItem){ 
     _($scope.products).each(function (item){ 
      item.selected = false; 
      if (selectedItem === item){ 
       selectedItem.selected = true; 
      } 
     }) 
    }; 

}) /*End Controller*/ 

});

來源

2016-03-16 Auzy

它看起來像有$ scope.item中的url中的項目。你只是問如何使用該變量從產品數組中獲取對象？ – Austin

這將爲您選擇的物品，一個假裝你按名稱匹配。

$scope.selectedItem = _.where($scope.products, {name: $scope.item});

來源

2016-03-16 20:11:05 Austin

我想，如果我是你，我會用角service共享控制器之間的數據和該服務將處理數據對我來說，當我改變產品將返回項目目標

angular.module('app').factory('productsService', function() { 
    self = this; 
    self.products = [{ 
    "name": "Product 1", 
    "index":1, 
    "link":"product1", 
    "price":"TBD", 
    }]; 
    this.findByLink = function(link){ 
     // loop through your data 
     // returns what found or null 
    } 
return { 
    products : this.products 
    findById : this.findById 
} 

});

和在每個控制器

.controller('appCtrl', function ($scope, productsService) { 
    $scope.products = productsService.products; 
    ..........

和花葯一個

噴射該服務

.controller('productCtrl', function ($scope, productsService, $stateParams) { 

    $scope.item = productsService.findById($stateParams.link); 
    ..........

來源

2016-03-16 20:22:01

服務返回和productCtrl中的findById是否應該是'findByLink'？只是試圖瞭解從哪裏來。我的循環數據的方法找到匹配鏈接的對象並不成功。你會如何推薦這樣做？儘管哪個工作很好，我已經創建了factorie。 – Auzy

選擇基於UI路由器的JSON對象url

回答

相關問題