我遇到了更新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 = "";
然后,根据访问者点击“清除”或“登录”按钮,我有两个清除值的功能:
$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
(我正在更新上面代码中的值,以表明只是“清除”值不是问题)。根据我输入的字段或通过typeahead自动填充,onClearClick
的结果会有所不同。
我尝试删除typeahead(AngularUI-Bootstrap Typeahead指令),但这并没有解决问题。
为什么我的值有时会在视图中更新,有时候不会?