Question

我是angularjs的新手并且完全困惑，我正在尝试下面的代码并且不知道它是否正确。

index.html

<div class="input-group" ng-controller="validationController">
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span>
    <%= text_field_tag :checkindate, params[:checkindate], :placeholder => 'Select Date',  :class=>'form-control datepicker input-lg',:required=>true,"ng-model" => "checkin.date"%>

</div>


<div class="input-group" ng-controller='validationController'>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span>
    <%= text_field_tag :checkoutdate, params[:checkoutdate],:placeholder => 'Select Date', :class=>'form-control datepicker input-lg',:required=>true,"ng-model" => "checkout.date"%>
</div>

<p ng-show='isInvalidDate()'>Checkout Date Cannot be lesser than Checkin Date</p>

validationController.js

App.controller('validationController',['$scope', function($scope){
$scope.isInvalidDate = function(){
    return $scope.checkout.date < $scope.checkin.date;
}
}]) ;

App.js

var App = angular.module('App',[]);

现在，当我选择退房日期小于签入日期时，不会显示错误。有人可以指点我正确的方向吗？

Answer 1

controller仅适用于声明它的DOM元素及其子元素。

<p ng-show='isInvalidDate()'>Checkout Date Cannot be lesser than Checkin Date</p>

超出了两个控制器的范围。

由于您正在尝试比较两个input的值，因此您需要同时拥有它们并且p将错误消息保存在具有{{的单个DOM元素中1}}属性。

此外，您使用ng-controller属性的方式似乎暗示您将其视为单身人士。它不是。在您的情况下，您有两个ng-controller实例，其中一个知道签入日期，另一个知道结帐日期。他们都不能真正执行有效性。

如何使用angularjs显示控制器的验证错误？

1 个答案: