Question

我在项目中使用AngularJs（Angular1），我有一个获得值的ng-model：

<input id="myinput" type="text" class="form-control" ng-model="ctrl.myDate" ng-required="true" />

只要ctrl.myDate不为null就可以正常工作，当它为null时会破坏代码

有没有办法可以检查值是否为null并添加（例如）今天的日期，如果它为null，那么它不会中断？

我该怎么做？

Answer 1

<input ng-if="ctrl.myDate" id="myinput" type="text" class="form-control" ng-
   model="ctrl.myDate" ng-required="true" />
 <!-- default date when myDate is null -->
 <input ng-if="!ctrl.myDate" id="myinput" type="text" class="form-control" ng-
   model="ctrl.defaultDate" ng-required="true" />

您可以在$ scope.ctrl中存储defaultDate。

Answer 2

1）假设ctrl.myDate为空，那么它可能在控制器的某处初始化。基于此，替换模型值的正确位置是您的控制器而不是视图。

因此，在这种情况下，您的代码可能如下所示：

  function setDate() {
    const today = new Date();
    vm.myDate = getDate() || today; // If date is null then assign today.
  }

  function getDate() { //This might be an http call that brings the date.
    return null;
  }

2）另一方面，如果您的模型仅用于演示目的，您可以使用ng-value指令执行此类操作，但可能没有理由使用input标记。

<input id="myinput" type="text" class="form-control" ng-value="ctrl.myDate || ctrl.today" ng-required="true" />

这里是working sample based on your question。

Answer 3

您可以将条件移动到控制器初始化的位置而不是ng模型中吗？例如NG-INIT？

var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
  var testController = this;

  testController.init = function (dateInput) {
     if (dateInput !== null) {
         testController.myDate = dateInput !== null ? dateInput : getDate();
     }
  };    
}]);

和

<div ng-controller="TestController as ctrl" ng-init="ctrl.init(yourDate)">
    <input id="myinput" type="text" class="form-control" ng-model="ctrl.myDate" ng-required="true" />
</div>

Javascript AngularJs（NG1）如果ng-model值为null

3 个答案: