AngularJS: route von /page/:id und id anzeigen die Informationen?

Ich weiß, es ist ein schlecht gebautes Frage, aber ich weiß nicht, wie sonst zu Fragen.

Ich bin neu in AngularJS, ich bin versucht zu sagen, dass "wenn ein Benutzer klickt auf "dieses" Profil, gehen Sie zu /models/{{ model.id }} mit dem Modell.id wird der Wert von "this" - Profil, auf die geklickt wurde.

Grundsätzlich die main.html hat nur einen Teil der Informationen (ein Ausschnitt, wenn man will), und wenn ein Profil angeklickt wird, sollte es gehen, um /models/{{ model.id }} und dann zeigen Sie das volle Profil, im Gegensatz zu nur ein Ausschnitt.

Ich habe es zu arbeiten, so weit, dass Sie die richtige id zeigt sich, wenn die Maus den Profil-link, und es geht in die richtige Ansicht mit der korrekten url-Parameter, aber wie kann ich das schreiben von Daten in die Ansicht, es geht so, dass die Daten relevant sein, die ID, auf die geklickt wurde? Ich in der Regel tun dies mit PHP/Laravel und MySQL, aber ich wollte es versuchen mit den Eckigen.

app.js:

'use strict';

angular
    .module('swoleincApp', [
        'ngRoute',
        'ngSanitize',
        'ngAnimate'
    ])
    .config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/models', {
                    templateUrl: 'views/main.html',
                    controller: 'MainCtrl'
                })
                .when('/models/:id', {
                    templateUrl: 'views/individual.html',
                    controller: 'MainCtrl'
                })
                .otherwise({
                    redirectTo: '/models'
                });

            $locationProvider.html5Mode(true);
        }]);

MainCtrl.js:

'use strict';

angular
    .module('swoleincApp')
    .controller('MainCtrl', ['$scope', '$http', MainCtrl]);

function MainCtrl($scope, $http) {
    $http.get('storage/models.json').success(function(data) {
        $scope.models = data;
    });
}

main.html:

<div class="model-container" ng-repeat="model in models">
        <a href="/models/{{ model.id }}">
            <div class="row">
                <div class="col-sm-2">
                    <div class="model-profile-image">
                        <img ng-src="{{ model.profileImage }}" width="100" height="100">
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="model-stats">
                        <h3>{{ model.name }}, {{ model.age }}, {{ model.height }}, {{ model.weight }}.</h3>
                    </div>
                    <div class="model-motto">
                        <p>{{ model.motto }}</p>
                    </div>
                </div>
            </div>
        </a>
    </div>

Modelle.json (und behaupten, dass die "anderen Sachen" ist gemeint, dass für die einzelnen profile):

{
    "1": {
        "id": "1",
        "profileImage": "../img/dom.jpg",
        "name": "Dom",
        "age": "19",
        "height": "6'2",
        "weight": "170lbs",
        "motto": "My name is dom and I'm a 19 year old bodybuilder from Russia.",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
    },
    "2": {
        "id": "2",
        "profileImage": "../img/Tom.jpg",
        "name": "Tom",
        "age": "21",
        "height": "5'8",
        "weight": "190lbs",
        "motto": "I'm Tom. Everyone knows my name. Everyone knows my game.",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
        "other": "other stuff",
    }
}

InformationsquelleAutor Lansana | 2015-10-08