在AngularJS Control中设置模型不更新视图(某事......)

时间:2013-10-31 17:59:15

标签: javascript angularjs angularjs-scope angular-ui-bootstrap angularjs-controller

我遇到了更新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指令),但这并没有解决问题。

为什么我的值有时会在视图中更新,有时候不会?

0 个答案:

没有答案