0

料理のリストを表示する Menu.html ページがあります。各料理の画像をクリックすると、dishdetail.html ページに誘導したいと思います。しかし、dishdetail.html では角度パラメータが不明です。

Menu.html:

<div class="tab-content">
        <ul class="media-list tab-pane fade in active">
            <li class="media" ng-repeat="dish in dishes| filter:filtText">
                <div class="media-left media-middle">
                    <a href="#/menu/{{dish._id}}">
                        <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza">
                    </a>
                </div>

                <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}
                    <span class="label label-danger label-xs">{{dish.label}}</span>
                    <span class="badge">{{dish.price|currency}}</span>
                    </h2>
                    <p ng-show="showDetails">{{dish.description}}</p>
                </div>
            </li>
        </ul>
  </div>

料理の詳細.html:

<div class="row row-content" ng-controller="DishDetailController">
        <div class="col-xs-12">

            <div class="media-left media-middle">
                <a href="#/menu/{{dish._id}}">
                        <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza">
                    </a>
            </div>

            <div class="media-body">
                <h2 class="media-heading">{{dish.name}}
                <span class="label label-danger label-xs">{{dish.label}}</span>
                <span class="badge">{{dish.price|currency}}</span>
                </h2>
                <p>{{dish.description}}</p>
            </div>

        </div>
</div>

および app.js:

'use strict'
 angular.module('confusionApp',  ['ngRoute'])
.config(['$routeProvider',function($routeProvider)  {

    $routeProvider
    .when('/menu',  {   //  route   for the menu    pag
           templateUrl :    'menu.html',    controller      :   'MenuController'
    })

    .when('/menu/:id',  {   //  route   for the dish    details pag
           templateUrl :    'dishdetail.html',  controller      :   'dishDetailController'
    })

    .otherwise('/menu');
}]);

controllers.js:

angular.module('confusionApp')
.controller('DishDetailController', ['$scope', '$routeParams', 
      'menuFactory', function($scope, $routeParams, menuFactory) {

        var dish= menuFactory.getDish(parseInt($routeParams.id,10));
        $scope.dish = dish;
  }]);

およびservices.js:

'use strict'
 angular.module('confusionApp')

   .factory('menuFactory',function(){

        var menufac = {};

        var dishes=[
        {
        _id:0,
        name:'Uthapizza',
        image:'images/uthapizza.png',
        category:'main',
        label:'Hot',
        price:'4.99',
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza topped with cerignola olives, ripe vine charry tomatoes, vidalia onion, Guntour chillies.'
        },
        {
          _id:1,
        name:'Elaicheesecake',
        image:'images/elaicheesecake.png',
        category:'appetizer',
        label:'New',
        price:'4.99',
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza topped with cerignola olives, ripe vine charry tomatoes, vidalia onion, Guntour chillies.'
        }];

        menufac.getDishes = function(){
            return dishes;
        };

        menufac.getDish = function(index){
            return dishes[index];
        };

        return menufac;
    });
4

1 に答える 1

0

これは、オブジェクト プロパティの "_id" がプライベート プロパティであるためです。プロパティ/変数の前のアンダースコアは、それがプライベートであり、コントローラー/スクリプトだけが参照できることを意味します。

回避策は、オブジェクト プロパティ「_id」を「id」に変更することです。

于 2016-11-17T10:40:16.590 に答える