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 ディレクティブ) を削除しようとしましたが、問題は解決しませんでした。
ビューで値が更新される場合と更新されない場合があるのはなぜですか?