Angularjs / Ui-router：如何使 ng-repeat 列表项 link 到 .html 页面？

Question

我正在开发我的第一个 angularjs 应用程序，我使用 ui-router 作为我的路由，效果很好！

我想实现以下目标：在我的应用程序中，用户可以在输入字段中搜索 name/place 等，我让它工作得很好。当用户找到他正在寻找的内容时，他们需要能够单击该信息并转到它所属的页面。

例如，我搜索 "MacDonalds" 我会看到以下内容 "logo, name, adres, place, website" 当我单击它时，我将转到我的应用程序中的一个页面，其中包含有关麦当劳的更多信息。

我尝试如下所示进行操作。

app.js

'use strict';
var app = angular.module('app', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){
$urlRouterProvider.otherwise('/');

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'view/home.html'

  })
  .state('restaurants', {
    url: '/restaurants',
    templateUrl: 'view/restaurants.html'

  })
  .state('contact', {
    url: '/contact',
    templateUrl: 'view/contact.html'
  });

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';

 }]);

 function RestaurantCtrl($scope) {
  $scope.restaurantlist = [
{
  name: 'A1-plaza',
  adres: 'Ruimtevaart 8',
  place: '3824 MX Amersfoort',
  tel: '033 468 1988',
  website: 'www.a1-plaza.nl',
  logo: 'img/a1-plaza.png',
  id: 'a1plaza'

},
{
  name: 'De Faam',
  adres: 'Hamseweg 5',
  place: '3828 AA Hoogland',
  tel: '033 480 1213',
  website: 'www.defaam.nl',
  logo: 'img/defaam.png',
  id: 'defaam'
}

];
};

app.controller('RestaurantCtrl', RestaurantCtrl);

home.html

<section class="row">
<article class="col-xs-12" ng-controller="RestaurantCtrl">
<p>je kan momenteel zoeken op a1-plaza en de faam zowel naam als plaats en adres gegevens (dit blijft hier niet staan nienke ;)</p>
    <form role="form"> 
        <div class="form-group has-feedback">
            <input ng-model="search" type="text" class="form-control" placeholder="Zoek uw locatie, restaurant" />
            <i class="form-control-feedback glyphicon glyphicon-search"></i>
        </div>
    </form>
    <table class="table">
        <tr ng-show="search" ng-repeat="restaurant in restaurantlist | filter:search">
            <td>
                <a style="display: block;" ui-sref="restaurant.detail">
                    <img class="img-responsive" ng-src="{{restaurant.logo}}">
                </a>
            </td>
            <td>
                <a style="display: block;" ui-sref="restaurant.detail">
                    {{restaurant.name}}<br> {{restaurant.adres}}<br>
                    {{restaurant.place}}<br> {{restaurant.tel}}<br>
                    {{restaurant.website}}
                </a>
            </td>
        </tr>
    </table>
</article>

我已经尝试了 4 个小时的解决方案，但无法弄清楚执行此操作的最佳方法是什么/如何执行此操作。如果您知道一个好的解决方案，请告诉我，如果可能，请提供示例和一些解释

该应用程序在 check the app here

上线

调整浏览器大小以获得更好的图片

编辑：

在@thedoctor 的帮助下，我现在插入了他的解决方案，并将我的 html "ng-href" 更改为 ui-sref="restaurant.detail"。我还为餐厅添加了一个 ID。那么我该如何制作合适的 restaurantService？

Answer 1

您需要定义另一个状态来显示单个餐厅的视图，它将由餐厅 ID（或类似的东西）参数化。

我假设您有一个服务 "restaurantService" 作为服务器的接口，或者您可以直接使用 $http 或 $resource。

.state('restaurant.detail', {
        url: '/restaurants/:id',
        templateUrl: 'view/restaurant.html',
        controller: function($scope, restaurant){
          $scope.restaurant = restaurant.data;
        },
        resolve: {
            restaurant: function (restaurantService, $stateParams) {
                return restaurantService.get({id: $stateParams.id});  
            }
        }
    }

Angularjs / Ui-router：如何使 ng-repeat 列表项 link 到 .html 页面？

Angularjs / Ui-router : how to make ng-repeat list items link to a .html page?

angularjs

angularjs-directive

ng-repeat

angularjs-scope

angular-ui-router