0

AngularJS コントローラーの値を更新し、モデルに正しく反映させる際に問題が発生しています。

私は次のようformに考えています。

<form name="formSignIn" id="formSignIn" role="form">
  <div class="form-group">
    <label for="guestName">Name or Employee ID</label>
    <div class="input-group merged">
      <input type="text" class="form-control" id="guestName" ng-model="name" typeahead="person.name as person.displayName for person in getTypeaheadValues($viewValue)" typeahead-on-select="onTypeaheadSelect($item, $model, $label)" placeholder="Enter Name or Employee ID">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default"><i class="fa fa-times-circle"></i></button></span>
    </div>
  </div>
  <div class="form-group">
    <label for="guestOrg">Organization</label>
    <input type="text" class="form-control" id="guestOrg" ng-model="organization" placeholder="Organization">
  </div>
  <div class="form-group">
    <label for="guestPurpose">Purpose</label>
    <input type="text" class="form-control" id="guestPurpose" ng-model="purpose" placeholder="Why are you visiting today?">
  </div>
</form>

ng-modelコントローラーの上部で値を初期化します。

$scope.name = "";
$scope.organization = "";
$scope.purpose = "";

次に、訪問者が「クリア」または「サインイン」ボタンを押すことに基づいて、値をクリアする 2 つの関数があります。

$scope.onSignInClick = function()
{
    // show confirmation
    $scope.leftContent = "confirm";

    // clear the form
    $scope.name = null;
    $scope.organization = null;
    $scope.purpose = null;

    // display the form again after a short pause
    $timeout(function () {
        $scope.leftContent = "splash";
    }, 3000);
}

$scope.onClearClick = function()
{
    // confirm function is being called
    console.log("clear");

    // clear the form (trying multiple ways)
    $scope.name = "";
    $scope.organization = null;
    $scope.purpose = "abc123";
}

私のonSignInClick機能は... 確実に機能します。トラブルはありません。

私のonClearClick機能... 一貫した方法で機能することはありません。organizationクリアされることもあれば、入力されることもpurposeあります(値を「クリア」するだけでは問題ではないことを示すために、上記のコードの値を更新しています)。どのフィールドに入力するか、先行入力で自動入力するかによって、結果はonClearClick異なります。

typeahead (AngularUI-Bootstrap Typeahead ディレクティブ) を削除しようとしましたが、問題は解決しませんでした。

ビューで値が更新される場合と更新されない場合があるのはなぜですか?

4

0 に答える 0