Как разделить $routeParams на div
У меня есть окно поиска в прямом эфире с завода. я использую $routeParams извлекать информацию из URL, но не могу заставить ее работать полностью. Я пытаюсь разбить URL на сегменты, чтобы я мог стилизовать и позиционировать truckData.firstName а также truckData.company на две строки. Я также не могу понять, как включить изображение с $routeParams, Предложения с благодарностью!
app.js:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'vehicleController'
})
.when('/:firstName', {
templateUrl: 'pages/driverData.html',
controller: 'profileController'
})
});
myApp.controller('vehicleController', function($scope, truckData) {
$scope.vehicleSearch = truckData;
});
myApp.controller('profileController', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.model = {
firstName: $routeParams.firstName
}
}]);
myApp.factory('truckData', function () {
var truckData = {};
truckData.drivers = [
{
firstName: "John",
lastName: "Doe",
company: "Company XYZ",
vehicle: "1234",
image: ??
},
{
firstName: "Jane",
lastName: "Doe",
job: "Designer",
vehicle: "5678",
image: ??
},
{
firstName: "Jake",
lastName: "Doe",
job: "Designer",
vehicle: "9012",
image: ??
}
];
return truckData;
});
driverData.html:
<h3>{{ model.firstName }}</h3>
main.html:
<h5>ENTER VEHICLE ID (OR UA) TO FIND A VEHICLE</h5>
<div id="results">
<img src="images/findVehicle.png" class="vehicleSearch">
<input type="text" placeholder="Enter Name or Vehicle ID" ng-model="search">
<button class="btn btn-info" type="search">submit</button>
<table width="224" align="center" ng-show="(filteredData = (vehicleSearch.drivers | filter:search)) && search && search.length >= 1">
<tr ng-repeat="truck in filteredData">
<td width="119" align="left"><a id="link-4" href="index.htm#/{{ truck.firstName }}" name="xx" ng-click="value = 4">{{" #" + truck.vehicle}}</a></td>
</tr>
</table>
index.html:
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- BOOTSTRAP & FONT AWESOME -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<!-- CUSTOM STYLES -->
<link rel="stylesheet" href="css/main.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<!-- ANGULAR PROJECT CODE -->
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<p><img src="images/findVehicle.png">Find a Vehicle</p>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#/second"><i></i> Second</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
main.css:
.navbar-default {
background-color: #323a45;
border-radius: 0;
}
.navbar-header p {
color: #f1f1f3;
padding-top: 12px;
}
.container {
text-align: center;
}
body {
background-color: #dfe5e8;
}
#results {
margin: 0 0 0 15px;
}
.searchIcon {
margin-right: -20px;
}
h5 {
color: #5e6d81;
}
p img {
margin-right: 15px;
}
::-webkit-input-placeholder {
color: #a1b1bc;
font-size: 10pt;
padding: 3pt 0 0 4pt;
}
:-moz-placeholder { /* Firefox 18- */
color: #a1b1bc;
}
::-moz-placeholder { /* Firefox 19+ */
color: #a1b1bc;
}
:-ms-input-placeholder {
color: #a1b1bc;
}
1 ответ
Вы не должны передавать всю информацию через $routeParams. Вместо этого вы должны передать уникальный идентификатор для конкретного грузовика, а затем вы можете перезвонить на ваш завод, чтобы получить информацию о выбранном грузовике.
Я буду использовать номер транспортного средства в качестве идентификатора для примера. Я также собираюсь переключить вашу фабрику на использование обещаний, которые она с большей вероятностью вернет с реальными данными.
Ваш VehicleController станет:
myApp.controller('vehicleController', ['$scope', 'truckData', function($scope, truckData) {
truckData.getTrucks().then(function(trucks) {
$scope.vehicleSearch = trucks;
});
}]);
Ваш профильКонтроллер станет:
myApp.controller('profileController', ['$scope', '$routeParams', 'truckData', function($scope, $routeParams, truckData) {
var vehicleNumber = $routeParams.vehicle;
truckData.getTruckDriver(vehicleNumber).then(function (truck) {
$scope.model = truck
});
}]);
Ваш завод будет выглядеть так:
myApp.factory('truckData', ['$q', function ($q) {
var truckData = {};
truckData.drivers = [
//load drivers here
];
var getTruckDriver = function(vehicleNumber) {
var deferred = $q.defer();
for (var i = 0; i++; i < truckData.drivers.length) {
if (truckData.drivers[i].vehicle === vehicleNumber {
deferred.resolve(truckData.drivers[i]);
}
}
return deferred;
}
var getTrucks = function() {
var deferred = $q.defer();
deferred.resolve(truckData);
return deferred;
}
return {
getTrucks: getTrucks,
getTruckDriver: getTruckDriver
}
}]);
После того, как вы переключитесь на этот шаблон, вам не нужно беспокоиться о передаче изображения по маршруту, вы можете просто указать путь к изображению как часть данных драйвера.
Я не занимаюсь обработкой ошибок в обещаниях для этого примера, но для реальных приложений вам следует