Question

我使用角度向导在收集一些基本表单数据时进行多次传递。该向导有3个步骤：第一步收集客户的姓名和号码，第二步收集客户的地址和联系人。完成所有步骤后，我将收集的数据保存到本地存储，并将向导设置回其第一页。我遇到的问题是第一个向导页面上的两个文本输入控件都保留了过去运行的值。我正在寻求帮助，将这些字段重置为＆＃39;＆＃39;＆＃39;值。此向导表单中的所有字段都绑定到$ scope.currentCustomer对象变量。这是我的HTML：

<div class="header">
  <ul class="nav nav-pills pull-right">
    <li class="active"><a ng-href="#">Home</a></li>
    <li><a ng-href="#">About</a></li>
    <li><a ng-href="#">Contact</a></li>
  </ul>
  <h3 class="text-muted">wizard</h3>
</div>

<div>
    {{wizardPageMessage}}
    <wizard>
        <wz-step title="Step 1">
            <h1>This is Step 1</h1>
            <!--<ng-include src="'step1.html'"></ng-include>-->
            <input id="custName" placeholder="customer name" data-ng-model="currentCustomer.customerName"/>
            <br/>
            <input id="custNumber" placeholder="customer number" data-ng-model="currentCustomer.customerNumber"/>
            <br/>
            <input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step"
                   data-ng-click="page_1_Action(currentCustomer.customerName,currentCustomer.customerNumber)" />
        </wz-step>
        <wz-step title="Step 2">
            <h1>This is Step 2</h1>
            <input id="custAddress" placeholder="customer address" data-ng-model="currentCustomer.customerAddress"/>
            <br/>
            <input id="custContact" placeholder="customer contact" data-ng-model="currentCustomer.customerContact"/>
            <br/>
            <input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step"
                   data-ng-click="addCustomerAddressAndContact(currentCustomer.customerAddress,currentCustomer.customerContact)"/>
        </wz-step>
        <wz-step title="Step 3">
            <h1>This is Step 3</h1>
            <p>Finish this round, and start a new one</p>
            <input type="submit" class="btn btn-primary" wz-next value="Commit And Start Over" data-ng-click="saveCustomerRecord()"/>
        </wz-step>
    </wizard>
</div>

<div class="footer">

</div>

这是我的应用和控制器代码：

'use strict';

var app = angular.module('wizardApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'mgo-angular-wizard'
]);

app.value('host', false /*use local host*/ ? "http://localhost:63428" : "http://sampleservice.breezejs.com");

app.controller('MainCtrl',
    ['$scope', 'logger', 'datacontext','$timeout','WizardHandler',
        function($scope, logger, datacontext, $timeout,WizardHandler) {
            var currentCustomer;
            function Customer(name,number,address,contact)
            {
                this.customerName = name;
                this.customerNumber = number;
                this.customerAddress = address;
                this.customerContact = contact;
            }

            logger.log('created MainCtrl');
            $scope.items = [];
            $scope.logList = logger.logList;
            $scope.lastLog = function(){return logger.lastLog;};

            $scope.page_1_Action = function(name,number){
                 logger.log('MainCtrl : page_1_Action dataInput:  ' + name + '  ' + number);

                 $scope.currentCustomer = new Customer('','','','');
                 $scope.currentCustomer.customerName = name;
                 $scope.currentCustomer.customerNumber = number;
                    }
            $scope.addCustomerAddressAndContact = function(address,contact){
                logger.log('MainCtrl : addCustomerAddressAndContact dataInput:  ' + address + '   ' + contact);
                $scope.currentCustomer.customerAddress = address;
                $scope.currentCustomer.customerContact = contact;
                    }
            $scope.saveCustomerRecord = function(){
                 datacontext.addCustomer($scope.currentCustomer);
                 datacontext.commit();
                 datacontext.showExported();

                 $scope.currentCustomer.customerName = '';
                 $scope.currentCustomer.customerNumber = '';
                 $scope.currentCustomer.customerAddress = '';
                 $scope.currentCustomer.customerContact = '';
                 WizardHandler.wizard().goTo(0);
            }

        }]

);

app
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Answer 1

似乎我设法重置了这些值。我的控制器看起来像：

function TripController($scope, WizardHandler) {
  'use strict';

  $scope.trip = new Trip();


  $scope.addTrip = function () {
    // ...
  }

  $scope.finished = function () {
    this.addTrip ();
    this.trip = new Trip();
    WizardHandler.wizard().goTo(0);
  }
}

我的旅行课程：

function Trip(title) {
    this.title = title;
}

我的模板是：

<h2>New trip</h2>

<wizard on-finish="finished()">
  <wz-step title="Start">
    <h3>Trip details</h3>
    <ng-form name="part1">
      <input ng-model="trip.title" ng-required="true">
    </ng-form>
    <p>
      <a class="btn btn-primary" wz-next="" ng-disabled="part1.$invalid">Next</a>
    </p>

  </wz-step>
  <wz-step>
    <p>
      <a class="btn btn-primary" wz-next="">Next</a>
    </p>
  </wz-step>

</wizard>

角度向导 - 清除表单输入有问题

1 个答案: