Question

我有一个带工厂的实时搜索框。我使用$routeParams从网址中提取信息，但似乎无法让它完全正常运行。我试图将网址拆分为细分，因此我可以将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;  
}

Answer 1

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

我将使用车辆编号作为示例的ID。我也打算将你的工厂改为使用promises，它更有可能返回实际数据。

您的vehicleController将成为：

myApp.controller('vehicleController', ['$scope', 'truckData', function($scope, truckData) {
    truckData.getTrucks().then(function(trucks) {
      $scope.vehicleSearch = trucks;
    });
}]);

您的profileController将成为：

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

切换到此模式后，您不必担心在路径上传递图像，您可以将图像路径作为驱动程序数据的一部分。

我没有对此示例的promises进行任何错误处理，但对于真实世界的应用程序，您应该

如何将$ routeParams分成div

1 个答案: