0

如何访问bootstrap-ui datepicker的 $valid, $dirty 值？

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
    <pre>Valid is: <em>|{{dt.$valid}}|</em></pre>
    <pre>Dirty is is: <em>|{{dt.$valid}}|</em></pre>
    <div class="form-horizontal">
        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>

    <hr />
</div>
  </body>
</html>

板工

4

1 回答 1

1

诀窍是用<form>or包装您的输入ng-form（就Angular而言相同），最好与控制器处于同一级别（或至少也包装控制器）并为表单和输入命名：

<div ng-form="theForm" ng-controller="DatepickerDemoCtrl">
    <input ... name="theInput" />
    <span>{{ theForm.theInput.$valid }}</span><!-- this works now -->
</div>

我更喜欢将我的控制器放在同一元素中或 (ng-)Form 下方，因为控制器中的代码也可以访问表单并根据有效性、脏等标志执行其他操作。访问表单 as$scope.formName和命名输入 as $scope.formName.inputName。

分叉的 plunk：http ://plnkr.co/edit/nHRuDgoktX9xclex4DDH?p=preview

于 2013-10-22T07:28:29.717 回答