Question

我正在尝试通过编写数字并按搜索按钮来自动填充输入表单字段。数据应来自远程Web服务。目标是AngularJS ng-model应该绑定值并将它们自动填充到输入字段中。它不起作用。

我的HTML和JavaScript看起来像这样：

'use strict';

var customerApp = angular.module('customerApp', ['ngRoute']);

customerApp.controller('CustomerUpdateCtrl', ['$scope', '$http', '$location', '$route', '$routeParams',
  function($scope, $http, $location, $route, $routeParams) {

    $scope.customer = {
      cust_no: '',
      cust_name: '',
      customers: [],
      currentCustomer: {}
    };

    // Update New Customer
    $scope.updateNewCustomer = function() {
      $http.get('http://office.insoft.net:9091/special_oystein_kunde_get/' + $scope.customer.cust_no).success(function(data) {
        $scope.customer.customers = data;
        $scope.whichCustomer = $routeParams.customerId;

        $location.path("/update");

        console.log('Message: ' + $scope.customer.customers);
        console.dir($scope.customer.customers);
        console.dir(data);
      });
    }

  }
]);

<!DOCTYPE html>
<html ng-app="customerApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Customer</title>
  <!-- bootstrap.min.css -->
  <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <!-- font-awesome.css -->
  <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
  <!-- bootstrap-theme.min.css -->
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />
  <!-- foundation.css -->
  <link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
  <!-- jquery.min.js -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- jquery-ui.min.js -->
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  <!-- bootstrap.min.js -->
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <!-- angular.min.js -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  <!-- angular-route.min.js -->
  <script src="https://code.angularjs.org/1.2.27/angular-route.min.js"></script>
  <!-- js/app.js -->
  <script src="js/app.js"></script>
  <!-- js/controllers.js -->
  <script src="js/controllers.js"></script>
  <!-- directives.js -->
  <script src="js/directives.js"></script>

</head>

<body>

  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <div class="text-center">
        <div class="page-header text-center">
          <h1>Rediger kunde</h1>
        </div>
        <form name="customer-form" novalidate ng-submit="" method="get">
          <div>
            <label>Customer Number</label>
            <input name="cust_no" type="number" ng-model="customers[whichCustomer].cust_no" placeholder="Customer Number..." />
          </div>
          <div>
            <label>Customer Name</label>
            <input name="cust_name" type="text" ng-model="customers[whichCustomer].cust_name" placeholder="Customer Name..." />
          </div>
          <div>
            <label>Postal Code</label>
            <input name="postplace_id" type="number" ng-model="customers[whichCustomer].postplace_id" placeholder="Postal Code..." />
          </div>
          <div>
            <label>City</label>
            <input name="postplace_name" type="text" ng-model="customers[whichCustomer].postplace_name" placeholder="City..." />
          </div>
          <div>
            <label>Phone Number</label>
            <input name="cust_telephone" type="tel" ng-model="customers[whichCustomer].cust_telephone" placeholder="Phone Number..." />
          </div>
          <br>
          <div>
            <button id="autofillMe" class="btn btn-primary" ng-click="updateNewCustomer()">Update Customer</button>
            <a href="/lagre/{{customer.cust_no}}" class="btn btn-primary">Save New</a>
          </div>
        </form>
        <br>
      </div>
    </div>
  </div>

</body>

</html>

如何在AngularJS中将Web服务数据自动填充到输入表单中？

0 个答案: