角度js顯示基於選定項目和url路徑的名稱

Question

我開始在角種子。我有一個json文件，顯示下面的項目。

{ 
    "id":"1", 
    "name":"Spain", 
    "abbrev":"esp" 
} 

當我點擊列表中的某個國家時，我想顯示該項目的名稱等詳細信息。

我有這個工作如下所示。

/* app.js */ 
    'use strict'; 

    // Declare app level module which depends on views, and components 
    angular.module('myApp', ['ngRoute','myApp.controllers','myApp.services']) 

    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider.when('/', { 
     templateUrl: 'templates/view1.html', 
     controller: 'CountryCtrl' 
     }); 
    }]) 

    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider.when('/:name', { 
     templateUrl: 'templates/view2.html', 
     controller: 'CountryCtrl' 
     }); 
    }]) 

    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider.otherwise({redirectTo: '/'}); 
    }]); 

    /* services.js */ 
    angular.module('myApp.services', []) 
    .factory('Countries', ['$http', function($http) { 
     var Countries = {}; 
     Countries.name = ''; 
     Countries.listCountries = function() { 
      return $http.get('../api/countries'); 
     }, 
     Countries.ChangeName = function (value) { 
      Countries.name = value; 
     } 
     return Countries; 
    }]); 

    /* controllers.js */ 

    angular.module('myApp.controllers', []) 

    .controller('CountryCtrl', ['$scope', 'Countries', '$location', function($scope, Countries,$location) { 
     listCountries(); 
     function listCountries() {Countries.listCountries() 
      .success(function (data, status, headers, config) { 
       $scope.countries  = data.countries; 
      }) 
      .error(function(data, status, headers, config) { 
       $scope.status = 'Unable to load data: ' + error.message; 
      }); 
     } 
     $scope.name = Countries.name; 
     $scope.changeView = function(countryName,indx){ 
      $location.path(countryName); 
      $scope.name = Countries.ChangeName(countryName); 
     } 
    }]); 

    /* templates/view1.html */ 
    <ul> 
     <li ng-repeat="country in countries"> 
     <div ng-click="changeView(country.name,$index)">{{country.name}}</div> 
     </li> 
    </ul> 

    /* templates/view2.html */ 
    {{name}} 

我不能去工作，如果我去http://www.example.com/app/#/然後導航到西班牙在列表中，然後我得到採取http://www.example.com/app/#/esp和{{名}}被作爲ESP輸出。

但是如果我導航直http://www.example.com/app/#/esp沒有先按一下西班牙的名單我在$ scope.name得不到值

我怎樣才能做到這一點？ 我希望名稱也可以根據位置路徑設置，如果可用。 我知道$位置。$$路徑會讓我/ ESP不過我真的不認爲這是使用這個櫃面的URL最好的主意構建出更大的東西如http://www.example.com/app/#/esp/events

我一些如何訪問該項目的索引或ID，這樣我可以再訪問諸如

{{countries[0].name}} 

的數據，其中0是ESP ID - 1 什麼是最好的方法？

Answer 1

伴侶，你的應用有幾個問題。

• 你的服務保留「狀態」，雖然僅用於檢索信息
• 您使用的是相同的控制器2組不同的意見（糟糕的做法）
• $ scope.status = 'Unable to load data: ' + error.message; - >錯誤沒有定義
• 有幾個JS錯誤的太像誤入逗號和東西

不管怎麼說，這裏是你的代碼的修訂版本。 Fiddle

---

// Instantiate your main module 
var myApp = angular.module('myApp', ['ngRoute']); 

// Router config 
myApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'templates/view1.html', 
     controller: 'CountryListCtrl' 
     }) 
     .when('/:id', { 
     templateUrl: 'templates/view2.html', 
     controller: 'CountryCtrl' 
     }) 
    } 
]); 

// Your Factory. Now returns a promise of the data. 
myApp.factory('Countries', ['$q', 
    function($q) { 
    var countriesList = []; 

    // perform the ajax call (this is a mock) 
    var getCountriesList = function() { 
     // Mock return json 
     var contriesListMock = [{ 
     "id": "0", 
     "name": "Portugal", 
     "abbrev": "pt" 
     }, { 
     "id": "1", 
     "name": "Spain", 
     "abbrev": "esp" 
     }, { 
     "id": "2", 
     "name": "Andora", 
     "abbrev": "an" 
     }]; 
     var deferred = $q.defer(); 
     if (countriesList.length == 0) { 
     setTimeout(function() { 
      deferred.resolve(contriesListMock, 200, ''); 
      countriesList = contriesListMock; 
     }, 1000); 
     } else { 
     deferred.resolve(countriesList, 200, ''); 
     } 
     return deferred.promise; 
    } 

    var getCountry = function(id) { 
     var deferred = $q.defer(); 
     if (countriesList.length == 0) { 
     getCountriesList().then(
      function() { 
      deferred.resolve(countriesList[id], 200, ''); 
      }, 
      function() { 
      deferred.reject('failed to load countries', 400, ''); 
      } 
     ); 
     } else { 
     deferred.resolve(countriesList[id], 200, ''); 
     } 
     return deferred.promise; 
    } 

    return { 
     getList: getCountriesList, 
     getCountry: getCountry 
    }; 
    } 
]); 


//Controller of home page (pretty straightforward) 
myApp.controller('CountryListCtrl', ['$scope', 'Countries', 
    function($scope, Countries) { 
    $scope.title = 'Countries List'; 
    $scope.countries = []; 
    $scope.status = ''; 

    Countries.getList().then(
     function(data, status, headers) { //success 
     $scope.countries = data; 
     }, 
     function(data, status, headers) { //error 
     $scope.status = 'Unable to load data:'; 
     } 
    ); 
    } 
]); 

// controller of Country page 
// Notice how we use $routeParams to grab the "id" of our country from the URL 
// And use our service to look for the actual country by its ID. 
myApp.controller('CountryCtrl', ['$scope', '$routeParams', 'Countries', 
    function($scope, $routeParams, Countries) { 
    $scope.country = { 
     id: '', 
     name: '', 
     abbrev: '' 
    }; 
    var id = $routeParams.id; 

    Countries.getCountry(id).then(
     function(data, status, hd) { 
     console.log(data); 
     $scope.country = data; 
     }, 
     function(data, status, hd) { 
     console.log(data); 
     } 
    ); 
    } 
]); 

Answer 2

在您的「CountryCtrl」中，如果包含$ routeParams並使用$ routeParams.tlaname，則可以訪問tlaname。然後您可以使用它來初始化您的數據。