Angular Bootstrap选项卡

时间:2016-06-09 13:30:48

标签: javascript angularjs angular-ui-bootstrap angularjs-ng-form angular-ui-bootstrap-tab

我在Angular JS 1.4.1原型中有一个表单。当它脏的时候,我有一个课程。我试图模拟某人“保存”表单,因此它不脏,它被“保存”所以更改仍然存在,但不再是脏的。

表单片段:

<div class="override">
  <tabset>
    <tab heading="My Tab">
      <form name="overridesForm">
        <p><input ng-model="rd.isOverriden" type="checkbox"> Foobar</p>
        <div class="buttons save-cancel">
          <button class="btn btn-default btn-xs" ng-click="overridesForm.reset();overridesForm.$setPristine()">Cancel</button>
          <button class="btn btn-primary btn-xs" ng-click="overridesForm.$setPristine()">Save with Inline</button>
          <button class="btn btn-primary btn-xs" ng-click="saveData()">Save with Inline</button>
        </div>
      </form>
    </tab>
    <tab heading="Some other Tab">
      blah
    </tab>
  </tabset>
</div>

将表单设置为pristine仅适用于内联,而不适用于控制器中的函数。所以这有效:

<button ng-click="overridesForm.$setPristine()">Save</button>

但不是这样:

<button ng-click="saveData()">Save</button>

//controller:
$scope.saveData = function () {
    $scope.overridesForm.$setPristine();
    toastr.success('Success', 'Data was saved.');
  };

我收到运行时错误“no object overridesForm defined”。

由于我尚未弄明白的原因,它有效in this codepen但不适用于我的项目。

更新:

在搜索了有关在包含内容的内容中访问表单后,我点击了这个:

 <button ng-click="saveData(overridesForm)">Save with Inline</button>

并在控制器中指定:

  $scope.saveData = function(form) {
    $scope.overridesForm = form;
    $scope.overridesForm.$setPristine();
  };

不确定这是否是最佳做法,但确实有效。更新了codepen。

0 个答案:

没有答案