Question

重新渲染datepicker-popup指令时，ui-datepicker似乎没有考虑先前选择的模型值。

请查看此plunker，选择日期，然后选中两次复选框以删除并重新创建日期选择器表单字段。

datepicker表单字段值从2014-12-14更改为2014年12月14日星期日14:21:46 GMT + 0100（CET）

<form class="form" name="test">
          <legend>Anuglar ui datepicker and ng-if Test</legend>
          <div  class="form-group">
            <label>
              <input type="checkbox" ng-model="mymodel.namespace.showDate"/>
              Show date
            </label>
            <pre>{{mymodel.namespace.date}}</pre>
          </div>
          <div  class="form-group"
                ng-if="mymodel.namespace.showDate === true "
          >

            <input 
              class="form-control" 
              name="date" 
              type="text" 
              ng-model="mymodel.namespace.date" 
              show-weeks="false" 
              show-button-bar="false" 
              is-open="calendarOpened" 
              ng-required="true" 
              ng-click="calendarOpened=true" 
              datepicker-popup />
          </div>
        </form>



// JS
app = angular.module('testApp', ['ui.bootstrap'])


app.controller('TestCtrl', function($scope){
  $scope.mymodel = {
    namespace: {
      date: new Date(),
      showDate: true
    }
  }
})

Answer 1

我能够复制你的错误并修复它。

这一行

对

的更改

<div  class="form-group" ng-show="mymodel.namespace.showDate === true ">

两者之间的区别在于，使用ng-if如果每次语句的计算结果为true，它将重新呈现该元素。使用ng-show类似于使用CSS来隐藏它。

我发现，如果我要做的就是隐藏一个元素直到需要它，我将使用ng-show。如果我想阻止元素呈现，我将使用ng-if。

重新渲染角度ui-bootstrap datepicker不一致

1 个答案: