如何将$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;  
}

您不应该通过$routeParams传递所有信息。相反，您应该为特定卡车传递一个唯一的标识符，然后您可以回电话给您的工厂，以获取所选卡车的信息。

例如，我将使用车辆编号作为ID。我还将把你的工厂改为使用承诺，它更有可能返回真实数据。

您的车辆控制器将变为：

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
    }
}]);

一旦切换到这种模式，就不必担心在路线上传递图像，只需将图像路径作为驾驶员数据的一部分即可。

我没有对这个例子的promise进行任何错误处理，但对于现实世界的应用程序，您应该

相关内容

最新更新

热门标签：